el-table-column label标题换行

北海军

于 2019-07-25 21:20:52 发布

阅读量6k

点赞数 2

分类专栏： element

element 专栏收录该内容

23 篇文章

订阅专栏

本文介绍两种在前端开发中优化表格数据展示的方法：一是通过添加特殊字符实现单元格内换行，二是利用自定义渲染函数对表头进行拆分显示，提升阅读体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法1

<el-table-column
  prop="otherCost"
  :label="'其他项目成本\n(元)'"> // 添加\n
 
</el-table-column>

.el-table .cell {
 
  white-space: pre-line;
}

方法2

<el-table-column
  prop="totalCost" :render-header="renderHeader"
  label="合计 (元)" // 合计后面空格
  width="180">
</el-table-column>

renderHeader(h, {column}) {
  let header = column.label.split(' ');
  return [h('p', [
    h('p', {}, header[0]),
    h('span', {}, header[1])
  ])];
} // 文本分别添加到p,span标签中