共计 2127 个字符,预计需要花费 6 分钟才能阅读完成。
问题形容
表格中的表头个别都是不换行的,不过有时候在某些业务场景中,须要让表头的文字换行展现一下,咱们先看一下效果图
效果图
三种形式的代码
看正文就行啦。
演示的话,间接复制粘贴运行就行啦
<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 不赘述,详情查问官网文档: https://developer.mozilla.org…
总结
三种形式各有特色,然而 render-header 会略为消耗一点点性能。
若为固定表头数据,则优先举荐应用表头插槽形式,其次举荐换行符加 css 形式。
若为动态数据,则只能应用表头 renderheader 函数了
若有更好的形式,欢送交换
^_^
正文完
发表至: element-ui
2021-11-11