詳解el-table表頭文字換行的三種方式

更新時間：2021年11月11日 14:18:04 作者：水冗水孚

本文主要介紹了el-table表頭文字換行的三種方式，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

問題描述

表格中的表頭一般都是不換行的，不過有時候在某些業(yè)務(wù)場景中，需要讓表頭的文字換行展示一下，我們先看一下效果圖

效果圖

三種方式的代碼

看注釋就行啦。
演示的話，直接復(fù)制粘貼運行就行啦

<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會換行，所以表頭就換行了，此方式適用于固定數(shù)據(jù)的表頭換行 -->
      <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="供應(yīng)商" 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>

      <!-- 表頭換行方式三，動態(tài)方式 -->
      <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 {
      // 動態(tài)數(shù)據(jù)表頭就需要讓后端返回來了，讓其在需要換行的地方用逗號分隔開
      tableHeader: [
        {
          labelName: "型號001,價格（元）",
          propName: "typeOne",
        },
        {
          labelName: "型號002,價格（元）",
          propName: "typeTwo",
        },
      ],
      // 表體數(shù)據(jù)
      tableBody: [
        {
          id: "2021111101",
          toolName: "5G服務(wù)",
          supplier: "華為",
          supplierCountry: "中國",
          typeOne: "8888888",
          typeTwo: "9999999",
        },
        {
          id: "2021111101",
          toolName: "6G-SERVER",
          supplier: "中華有為",
          supplierCountry: "CHINA",
          typeOne: "678678678",
          typeTwo: "789789789",
        },
      ],
    };
  },
  methods: {
    labelFn() {
      // 在需要換行的地方加入換行符 \n  ，在搭配最底下的white-space樣式設(shè)置
      return `供應(yīng)商\n所屬國家`;
    },

    // 餓了么UI的表頭函數(shù)渲染方式，這種方式和表頭插槽方式有點類似
    // 也是把表頭的數(shù)據(jù)文字分割成兩塊，然后將內(nèi)容渲染到兩個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>

關(guān)于white-space不贅述，詳情查詢官方文檔 developer.mozilla.org/zh-CN/docs/Web/CSS/white-space