elementUI的表格标题换行

最新推荐文章于 2025-10-11 09:35:20 发布

原创最新推荐文章于 2025-10-11 09:35:20 发布 · 5.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#标题换行

element-ui 同时被 2 个专栏收录

28 篇文章

订阅专栏

el-talbe

6 篇文章

订阅专栏

本文介绍了一种在Element UI的表格组件中实现表头换行显示的方法，通过使用自定义渲染函数，使得复杂的表头信息能够清晰地展示，提高了表格的可读性和用户体验。

表头换行显示

 <el-table :data="list" class="table-border text-noellipsis">
   <el-table-column prop="rptDate" label="日期" :formatter="formatDate"></el-table-column>
   <el-table-column prop="rgstrQty" label="截至该日期已注册的商家数|(A)" :render-header="renderheader"></el-table-column>
 </el-table>

methods: {
    // 表头换行
    renderheader(h, { column, $index }) {
      return h('span', {}, [
          h('span', {}, column.label.split('|')[0]),
          h('br'),
          h('span', {}, column.label.split('|')[1])
      ])
    },
 }

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