问题描述
表格中的表头一般都是不换行的，不过有时候在某些业务场景中，需要让表头的文字换行展示一下，我们先看一下效果图
效果图
三种方式的代码
看注释就行啦。
演示的话，直接复制粘贴运行就行啦
<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/…
总结
三种方式各有特色，但是render-header会略为耗费一点点性能。
若为固定表头数据，则优先推荐使用表头插槽方式，其次推荐换行符加css方式。
若为动态数据，则只能使用表头renderheader函数了
若有更好的方式，欢迎交流
^_^
23.10新增使用js直接拼接br标签
效果图：
代码如下、复制粘贴即用
<template>
<el-table :header-cell-style="cell" :data="tableData" style="width: 100%" border>
<el-table-column prop="goods" label="快递-商品" width="180" align="center"></el-table-column>
<el-table-column prop="status" label="商品-状态" width="180" align="center">
<template slot-scope="scope">
{{ dictFn(scope.row.status) }}
</template>
</el-table-column>
<el-table-column prop="date" label="下单日期" align="center"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: []
}
},
methods: {
dictFn(status) {
let showStatus = dict[status] ? dict[status] : '---'
return showStatus
},
cell({ row, column, rowIndex, columnIndex }) {
if (column.label) {
if (column.label.includes('-')) {
this.$nextTick(() => {
let thDom = document.querySelector(`.${column.id}`)
let text = thDom.childNodes[0].innerHTML
let pre = text.split('-')[0]
let next = text.split('-')[1]
thDom.childNodes[0].innerHTML = pre + '<br />' + next
})
return {
background: 'pink'
}
}
}
}
}
}
</script>
第五种：转义字符+css
效果图：
代码：
<template>
<el-table :data="tableData" border style="width: 600">
<el-table-column prop="name" :label="'姓' + `\n` + '名'" align="center"></el-table-column>
<el-table-column prop="age" label="年龄" align="center"></el-table-column>
<el-table-column prop="home" label="家乡" align="center"></el-table-column>
<el-table-column prop="kind" :label="'所属' + '\n' + '种族'" align="center"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
name: "孙悟空",
age: 500,
home: "花果山水帘洞",
kind: "monkey",
},
],
};
},
};
</script>
<style lang="less">
.el-table {
.el-table__header-wrapper {
table {
thead {
th {
font-weight: bold;
color: #333;
// 换行
.cell {
white-space: pre-wrap;
}
}
}
}
}
}
</style>
