el-table-column自定义标题换行

最新推荐文章于 2024-08-13 16:52:45 发布

杰瑞LJ

最新推荐文章于 2024-08-13 16:52:45 发布

阅读量1.6k

点赞数

分类专栏： element UI

本文链接：https://blog.csdn.net/qq_39797360/article/details/105073568

版权

element UI 专栏收录该内容

18 篇文章 2 订阅

订阅专栏

本文介绍了一种在Element UI的表格组件中实现列标题换行的方法，通过使用自定义渲染函数renderheader，可以在长标题中加入换行符，使表格布局更加美观。具体操作是在列配置中添加render-header属性，并在对应的方法中使用split和h函数组合实现文字的分段显示。

摘要由CSDN通过智能技术生成

在标题要换行的列中添加 :render-header=“renderheader” ，要换行的文字后加符号“-”（与方法中定义的符号一致）

<el-table-column   prop="" :render-header="renderheader" label="最高地价-(万元/亩)"  width="90" align="right"></el-table-column>

renderheader方法：

renderheader(h, { column, $index }) {
                return h('span', {}, [
                    h('span', {}, column.label.split('-')[0]),
                    h('br'),
                    h('span', {}, column.label.split('-')[1])
                ])
            },

效果：
在这里插入图片描述