el-table中label换行

最新推荐文章于 2024-05-17 14:58:26 发布

原创最新推荐文章于 2024-05-17 14:58:26 发布 · 968 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

elementUI

当前文章被收录于：

elementUI

1 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍两种在Element UI的表格组件中实现单元格内文本换行的方法，以及如何在一个列标题中显示多列信息的技巧。第一种方法通过在label属性中加入换行符并设置white-space样式为pre-line来实现。第二种方法则是利用render-header自定义渲染函数，将列标题拆分为多个部分展示。

方法一：
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;
}

方法二：
1.label中增加空格，绑定render-header方法

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

2.renderHeader方法
renderHeader(h, {column}) {
let header = column.label.split(’ ');
return [h(‘p’, [
h(‘p’, {}, header[0]),
h(‘span’, {}, header[1])
])];
}