Vue - ElementUI 表格合并行或列

ElementUI官网：https://element.eleme.cn/#/zh-CN/component/table#he-bing-xing-huo-lie

效果预览

代码实现

<template>
  <div class="page">
    <el-table
      class="tabel"
      :data="tableData"
      :span-method="arraySpanMethod"
      :header-cell-style="{ background: '#029ef1', color: '#ffffff' }"
      border
    >
      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="amount1" label="数值 1"> </el-table-column>
      <el-table-column prop="amount2" label="数值 2"> </el-table-column>
      <el-table-column prop="amount3" label="数值 3"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: "12987122",
          name: "王小虎1",
          amount1: "234",
          amount2: "3.2",
          amount3: 10,
        },
        {
          id: "12987123",
          name: "王小虎2",
          amount1: "165",
          amount2: "4.43",
          amount3: 12,
        },
        {
          id: "12987124",
          name: "王小虎3",
          amount1: "324",
          amount2: "1.9",
          amount3: 9,
        },
        {
          id: "12987125",
          name: "王小虎4",
          amount1: "621",
          amount2: "2.2",
          amount3: 17,
        },
        {
          id: "12987126",
          name: "王小虎5",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
        {
          id: "12987127",
          name: "王小虎5",
          amount1: "555",
          amount2: "4.2",
          amount3: 15,
        },
        {
          id: "12987128",
          name: "王小虎6",
          amount1: "555",
          amount2: "4.3",
          amount3: 16,
        },
      ],
    };
  },
  methods: {
    // 获取合并的数组
    flitterData(arr) {
      // 第二列（name）合并列的数据
      let spanOneArr = [];
      let concatOne = 0;
      // 第三列（amount1）合并列的数据
      let spanTwoArr = [];
      let concatTwo = 0;
      // 第五列（amount3）合并列的数据
      let spanThree = [];
      let concatThree = 0;
      //    ......
      arr.forEach((item, index) => {
        console.log(item, index);
        if (index === 0) {
          spanOneArr.push(1);
          spanTwoArr.push(1);
          spanThree.push(1);
        } else {
          // 第二列（name）需合并相同内容的判断条件
          if (item.name === arr[index - 1].name) {
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          }
          // 第三列（amount1）需合并相同内容的判断条件
          if (item.amount1 === arr[index - 1].amount1) {
            spanTwoArr[concatTwo] += 1;
            spanTwoArr.push(0);
          } else {
            spanTwoArr.push(1);
            concatTwo = index;
          }
          // 第五列（amount3）需合并相同内容的判断条件
          if (item.amount3 === arr[index - 1].amount3) {
            spanThree[concatThree] += 1;
            spanThree.push(0);
          } else {
            spanThree.push(1);
            concatThree = index;
          }
        }
      });
      return {
        one: spanOneArr,
        two: spanTwoArr,
        three: spanThree,
      };
    },
    /**
     * 合并表格列
     * row 当前行
     * column 当前列
     * rowIndex 当前行号
     * columnIndex 当前列号
     */
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      /**合并列 */
      // id 为 12987122、12987124 的1、2列合并，4、5列合并
      if (row.id == "12987122" || row.id == "12987124") {
        if (columnIndex === 0) {
          return [1, 2];
        } else if (columnIndex === 1) {
          return [0, 0];
        } else if (columnIndex === 3) {
          return [1, 2];
        } else if (columnIndex === 4) {
          return [0, 0];
        }
      }
      // id 为 12987123 的2、3列合并
      if (row.id == "12987123") {
        if (columnIndex === 1) {
          return [1, 2];
        } else if (columnIndex === 2) {
          return [0, 0];
        }
      }
      /**合并行 */
      // 第二列（name）的属性值相同的行合并
      if (columnIndex === 1) {
        const _row = this.flitterData(this.tableData).one[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      // 第三列（amount1）的属性值相同的行合并
      if (columnIndex === 2) {
        const _row = this.flitterData(this.tableData).two[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      // 第五列（amount3）的属性值相同的行合并
      if (columnIndex === 4) {
        const _row = this.flitterData(this.tableData).three[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
  },
};
</script>

<style scoped>
.page {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  background: #e9e9e9;
}
.tabel {
  width: 60%;
}
.tabel >>> td {
  background-color: #92c2f1;
  color: #040404;
}
</style>