el-table-column换行
时间: 2023-11-07 17:54:33 浏览: 224
vue el-table实现行内编辑功能
4星 · 用户满意度95%
el-table-column内部换行有多种方法可以实现。其中一种方法是使用render-header属性,并在renderHeader方法中返回一个span元素,其中包含多个span元素和br元素。每个span元素对应一个换行的内容。以下是一个示例代码:
<el-table :data="tableList2" border style="width: 100%">
<el-table-column :render-header="renderHeader" prop="level" label="这是一个/很长的表头"></el-table-column>
<el-table-column :render-header="renderHeader" prop="desc" label="不是一个/很短的表头"></el-table-column>
</el-table>
methods: {
renderHeader(h, { column, $index }) {
return h('span', {}, [
h('span', {}, column.label.split('/')),
h('br'),
h('span', {}, column.label.split('/')[1])
]);
}
}
另一种方法是在样式中添加"white-space: pre-wrap"属性,这将允许换行。以下是一个示例代码:
<el-table :data="tableList2" border style="width: 100%">
<el-table-column prop="level" label="这是一个/很长的表头" style="white-space: pre-wrap"></el-table-column>
<el-table-column prop="desc" label="不是一个/很短的表头" style="white-space: pre-wrap"></el-table-column>
</el-table>
请注意,这两种方法都可以实现el-table-column内部的换行效果。
阅读全文