【ElementUI】el-table中的label换行问题

想要实现label中换行的问题，我们以下面两种方式进行解决。1.依赖CSS的方法1.label中增加 \n<el-table-column prop="name" :label="'姓名\nname'" min-width="100"></el-table-column>2.设置white-space样式.el-table .cell {　　white-space: pre

爱焰

5702人浏览 · 2022-01-11 15:07:22

爱焰 · 2022-01-11 15:07:22 发布

想要实现label中换行的问题，我们以下面两种方式进行解决。

1.依赖CSS的方法

1.label中增加 \n
<el-table-column prop="name" :label="'姓名\nname'" min-width="100"></el-table-column>

2.设置white-space样式
.el-table .cell {
　　white-space: pre-line;
}
如果没有生效，查看一下css的权重问题，粗暴的方法可以使用!important

2.label中增加/，绑定render-header方法

<el-table-column :render-header="renderHeader" prop="capacity" label="姓名/name" min-width="90" align="center" />

renderHeader方法:

renderHeader(h, { column }) {
   return h('span', {}, [
     h('span', {}, column.label.split('/')[0]),
     h('br'),
     h('span', {}, column.label.split('/')[1])
   ])
 }