关于element-ui:eltable表头文字换行的三种方式

问题形容

表格中的表头个别都是不换行的，不过有时候在某些业务场景中，须要让表头的文字换行展现一下，咱们先看一下效果图

效果图

三种形式的代码

看正文就行啦。

演示的话，间接复制粘贴运行就行啦

<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不赘述，详情查问官网文档: https://developer.mozilla.org…

总结

三种形式各有特色，然而render-header会略为消耗一点点性能。

若为固定表头数据，则优先举荐应用表头插槽形式，其次举荐换行符加css形式。
若为动态数据，则只能应用表头renderheader函数了

若有更好的形式，欢送交换 ^_^