|
问题描述
表格中的表头一般都是不换行的，不过有时候在某些业务场景中，需要让表头的文字换行展示一下，我们先看一下效果图
效果图
三种方式的代码
看注释就行啦。
演示的话，直接复制粘贴运行就行啦
<template> <div class="vueWrap"> <el-table style="width: 900px" :data="tableBody" border :header-cell-style="{ background: '#FAFAFA', color: '#333333', fontWeight: 'bold', fontSize: '14px', }" > <el-table-column type="index" label="序号" width="58" align="center" ></el-table-column> <!-- 表头换行方式一，使用头部插槽方式，将表头文字拆分在两个div中，因为div盒子是块元素 所以两个div会换行，所以表头就换行了，此方式适用于固定数据的表头换行 --> <el-table-column prop="toolName" width="180" align="center"> <template slot="header"> <div>工具箱</div> <div>零件名称</div> </template> <template slot-scope="scope"> <span>{{ scope.row.toolName }}</span> </template> </el-table-column> <el-table-column label="供应商" prop="supplier" width="120" align="center"> </el-table-column> <!-- 表头换行方式二，较之于方式一，这种方式是/n换行符，加css的white-space空白样式控制--> <el-table-column :label="labelFn()" prop="supplierCountry" width="180" align="center" > </el-table-column> <!-- 表头换行方式三，动态方式 --> <el-table-column v-for="(item, index) in tableHeader" :key="index" :label="item.labelName" :prop="item.propName" width="180" align="center" :render-header="renderheader" ></el-table-column> </el-table> </div></template><script>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]), ]); }, },};</script><style lang="less" scoped>/deep/ .el-table th.el-table__cell > .cell { white-space: pre; // white-space: pre-wrap; // 也行。 }</style>关于white-space不赘述，详情查询官方文档 developer.mozilla.org/zh-CN/docs/Web/CSS/white-space
总结
三种方式各有特色，但是render-header会略为耗费一点点性能。
若为固定表头数据，则优先推荐使用表头插槽方式，其次推荐换行符加css方式。
若为动态数据，则只能使用表头renderheader函数了 到此这篇关于el-table表头文字换行的三种方式的文章就介绍到这了,更多相关el-table表头文字换行的三种方式内容请搜索51zixue.net以前的文章或继续浏览下面的相关文章希望大家以后多多支持51zixue.net！
下载地址:
vue activated在子组件中的使用详情
Vue3使用icon的两种方式实例 |
