el-table实现表头内容换行显示

最新推荐文章于 2024-07-26 16:15:54 发布

原创最新推荐文章于 2024-07-26 16:15:54 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

190 篇文章

订阅专栏

本文介绍两种在Element UI的表格中实现表头单元格换行的方法：一是使用模板插槽的方式，二是通过`renderHeader`函数实现。这两种方法均可有效解决表头文字过长的问题。

表头单元格换行：

方式1：

        <el-table-column header-align="center" align="center" width="60">
          <template slot="header">
            <div>密度</div>
            <div>(g/cm³)</div>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.density }}</span>
          </template>
        </el-table-column>

方式2：renderheader

https://blog.youkuaiyun.com/weixin_48286936/article/details/111314742