el-table表头文字换行

HZM_CSDN

已于 2022-05-31 23:08:21 修改

阅读量1.1k

点赞数

文章标签： elementui vue.js javascript

于 2022-05-31 23:08:06 首次发布

本文链接：https://blog.csdn.net/hzm_csdn/article/details/125075172

版权

本文介绍了如何通过Elasticsearch的模板插槽功能实现表格头部换行的效果，具体方法是将表头文字拆分到两个div中，利用块级元素的换行特性。示例代码展示了如何在`el-table-column`中设置`header`插槽，以达到自定义表头布局的目的。

摘要由CSDN通过智能技术生成

需求：效果如下图：

<!-- 表头换行方式一，使用头部插槽方式，将表头文字拆分在两个div中，因为div盒子是块元素
           所以两个div会换行，所以表头就换行了，此方式适用于固定数据的表头换行 -->
      <el-table-column prop="toolName" width="180" align="center">
        <template slot="header">
          <div>工具箱</div>
          <div>零件名称</div>
        </template>
        <template slot-scope="scope">
          <span>{{ scope.row.toolName }}</span>
        </template>
      </el-table-column>