el |
您所在的位置：网站首页 › eltable多级表头 › el |
el
|
想了解详解el-table表头文字换行的三种方式的相关内容吗，水冗水孚在本文为您仔细讲解el-table表头文字换行 的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：el-table表头文字换行,el-table表头换行，下面大家一起来学习吧。
问题描述
表格中的表头一般都是不换行的，不过有时候在某些业务场景中，需要让表头的文字换行展示一下，我们先看一下效果图 效果图
看注释就行啦。 演示的话，直接复制粘贴运行就行啦 工具箱 零件名称 {{ scope.row.toolName }} export default { data() { return { // 动态数据表头就需要让后端返回来了，让其在需要换行的地方用逗号分隔开 tableHeader: [ { labelName: "型号001,价格（元）", propName: "typeOne", }, { labelName: "型号002,价格（元）", propName: "typeTwo", }, ], // 表体数据 tableBody: [ { id: "2021111101", toolName: "5G服务", supplier: "华为", supplierCountry: "中国", typeOne: "8888888", typeTwo: "9999999", }, { id: "2021111101", toolName: "6G-SERVER", supplier: "中华有为", supplierCountry: "CHINA", typeOne: "678678678", typeTwo: "789789789", }, ], }; }, methods: { labelFn() { // 在需要换行的地方加入换行符 \n ，在搭配最底下的white-space样式设置 return `供应商\n所属国家`; }, // 饿了么UI的表头函数渲染方式，这种方式和表头插槽方式有点类似 // 也是把表头的数据文字分割成两块，然后将内容渲染到两个div中（div自动换行） renderheader(h, { column, $index }) { return h("div", {}, [ h("div", {}, column.label.split(",")[0]), h("div", {}, column.label.split(",")[1]), ]); }, }, }; /deep/ .el-table th.el-table__cell > .cell { white-space: pre; // white-space: pre-wrap; // 也行。 }关于white-space不赘述，详情查询官方文档 developer.mozilla.org/zh-CN/docs/Web/CSS/white-space 总结三种方式各有特色，但是render-header会略为耗费一点点性能。 若为固定表头数据，则优先推荐使用表头插槽方式，其次推荐换行符加css方式。 若为动态数据，则只能使用表头renderheader函数了 到此这篇关于el-table表头文字换行的三种方式的文章就介绍到这了,更多相关el-table表头文字换行的三种方式内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！ 相关文章Java 博客系统 Java 实战项目锤炼之朴素风格个人博C++ 运算符重载 聊聊C++ 运算符重载知识 |
【本文地址】
今日新闻 |
推荐新闻 |