elementUI中Vue 2方式<el-table>表格中列表列头内容过长,不换行处理
使用render-header
属性
<el-table-column
...
:render-header="headerRender"
></el-table-column>
methods: {
headerRenderer(h, { column }) {
// 使用h函数创建VNode,防止表头内容换行
return h(
'div',
{
style: {
whiteSpace: 'nowrap', // 防止文本换行
overflow: 'hidden', // 隐藏超出部分
textOverflow: 'ellipsis', // 超出部分显示省略号
},
},
//这里是为了设置排序按钮
[
h('span', column.label),
h('span', {
class: 'sort-icon-container',
}, [
h('i', { class: 'el-icon-caret-up' }),
h('i', { class: 'el-icon-caret-down' }),
]),
]
); }, },
这段代码中,我们使用Vue的渲染函数h
来创建表头单元格的内容,直接在其中设置了whiteSpace: 'nowrap'
来避免文本换行,并通过overflow
和textOverflow
来处理可能的溢出情况,显示省略号。
这样,即便CSS样式因某种原因未生效,也能确保表头文字不换行并优雅地处理过长文本。