el-table表头文字换行的三种方式

问题描述

表格中的表头一般都是不换行的，不过有时候在某些业务场景中，需要让表头的文字换行展示一下，我们先看一下效果图

效果图

三种方式的代码

看注释就行啦。
演示的话，直接复制粘贴运行就行啦

<template>
<div class="vueWrap">
  <el-table
    style="width: 900px"
    :data="tableBody"
    border
    :header-cell-style="{
      background: '#FAFAFA',
      color: '#333333',
      fontWeight: 'bold',
      fontSize: '14px',
    }"
  >
    <el-table-column
      type="index"
      label="序号"
      width="58"
      align="center"
    ></el-table-column>

    <!-- 表头换行方式一，使用头部插槽方式，将表头文字拆分在两个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>

    <el-table-column label="供应商" prop="supplier" width="120" align="center">
    </el-table-column>

    <!-- 表头换行方式二，较之于方式一，这种方式是/n换行符，加css的white-space空白样式控制-->
    <el-table-column
      :label="labelFn()"
      prop="supplierCountry"
      width="180"
      align="center"
    >
    </el-table-column>

    <!-- 表头换行方式三，动态方式 -->
    <el-table-column
      v-for="(item, index) in tableHeader"
      :key="index"
      :label="item.labelName"
      :prop="item.propName"
      width="180"
      align="center"
      :render-header="renderheader"
    ></el-table-column>
  </el-table>
</div>
</template>

<script>
export default {
data() {
  return {
    // 动态数据表头就需要让后端返回来了，让其在需要换行的地方用逗号分隔开
    tableHeader: [
      {
        labelName: "型号001,价格（元）",
        propName: "typeOne",
      },
      {
        labelName: "型号002,价格（元）",
        propName: "typeTwo",
      },
    ],
    // 表体数据
    tableBody: [
      {
        id: "2021111101",
        toolName: "5G服务",
        supplier: "华为",
        supplierCountry: "中国",
        typeOne: "8888888",
        typeTwo: "9999999",
      },
      {
        id: "2021111101",
        toolName: "6G-SERVER",
        supplier: "中华有为",
        supplierCountry: "CHINA",
        typeOne: "678678678",
        typeTwo: "789789789",
      },
    ],
  };
},
methods: {
  labelFn() {
    // 在需要换行的地方加入换行符 \n  ，在搭配最底下的white-space样式设置
    return `供应商\n所属国家`;
  },

  // 饿了么UI的表头函数渲染方式，这种方式和表头插槽方式有点类似
  // 也是把表头的数据文字分割成两块，然后将内容渲染到两个div中（div自动换行）
  renderheader(h, { column, $index }) {
    return h("div", {}, [
      h("div", {}, column.label.split(",")[0]),
      h("div", {}, column.label.split(",")[1]),
    ]);
  },
  
},
};
</script>
<style lang="less" scoped>
/deep/ .el-table th.el-table__cell > .cell {
white-space: pre;
// white-space: pre-wrap; // 也行。

}
</style>

关于white-space不赘述，详情查询官方文档 developer.mozilla.org/zh-CN/docs/Web/CSS/white-space

总结

三种方式各有特色，但是render-header会略为耗费一点点性能。
若为固定表头数据，则优先推荐使用表头插槽方式，其次推荐换行符加css方式。
若为动态数据，则只能使用表头renderheader函数了

关于el-table表头文字换行的三种方式的文章就介绍至此，更多相关el-table表头文字换行的三种方式内容请搜索编程宝库以前的文章，希望以后支持编程宝库！

Vue3 中使用Icon的方式，fontAwesome 简单好用，但有时候缺少想要的icon。采用svg的方式，想要什么，直接下载，然后使用，种类更加的全，基本上没有不符合需求的icon，但是没有fontAw ...