Merge the specified columns and rows, and export the method required for merging rows (only suitable for el-table)

Reference article: https://blog.csdn.net/qq_28254093/article/details/121138795

Vue element-ui merges cells to merge rows of specified columns

In the final effect, el-table can merge cells according to the specified column field, and set the same rules for other columns

 1.el-table-span-method.js

Place el-table-span-method.js in src\utilsthe directory of the vue project

/*
 * @Author: pcf pcf
 * @Date: 2022-08-01 09:06:28
 * @LastEditors: pcf pcf
 * @LastEditTime: 2022-08-01 09:07:01
 * @FilePath: \itanri2-admin-front\src\utils\el-table-span-method.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
/**
 * 合并相同数据，导出合并行所需的方法(只适合el-table)
 * @param {Array} dataArray el-table表数据源
 * @param {Array} mergeRowProp 合并行的列prop
 * @param {Array} sameRuleRowProp 相同合并规则行的列prop
 */
 export function getSpanMethod(dataArray, mergeRowProp, sameRuleRowProp) {

    /**
     * 要合并行的数据
     */
    const rowspanNumObject = {};

    //初始化 rowspanNumObject
    mergeRowProp.map(item => {
        rowspanNumObject[item] = new Array(dataArray.length).fill(1, 0, 1).fill(0, 1);
        rowspanNumObject[`${item}-index`] = 0;
    });

    //计算相关的合并信息
    for (let i = 1; i < dataArray.length; i++) {
        mergeRowProp.map(key => {
            const index = rowspanNumObject[`${key}-index`];
            if (dataArray[i][key] === dataArray[i - 1][key]) {
                rowspanNumObject[key][index]++;
            } else {
                rowspanNumObject[`${key}-index`] = i;
                rowspanNumObject[key][i] = 1;
            }

        });
    }

    /**
     * 添加同规则合并行的数据
     */
    if (sameRuleRowProp !== undefined) {
        let k = Object.keys(rowspanNumObject).filter(key => {
            if (!key.includes('index')) {
                return key
            }
        })[0]
        for (let prop of sameRuleRowProp) {
            rowspanNumObject[prop] = rowspanNumObject[k]
            rowspanNumObject[`${prop}-index`] = rowspanNumObject[`${k}-index`]
            mergeRowProp.push(prop)
        }
    }

    /**
     * 导出合并方法
     */
    const spanMethod = function ({row, column, rowIndex, columnIndex}) {
        if (mergeRowProp.includes(column['property'])) {
            const rowspan = rowspanNumObject[column['property']][rowIndex];
            if (rowspan > 0) {
                return {rowspan: rowspan, colspan: 1}
            }
            return {rowspan: 0, colspan: 0}
        }
        return {rowspan: 1, colspan: 1}
    };

    return spanMethod;
}

Example of use

Reference the method file in the vue page, and create table data in the export default data() return, and write out the method of calculating the merged cell

<script>
import {getSpanMethod} from "@/utils/el-table-span-method";

export default {
  data() {
    return {
      orderData: [
        {
          id: "1",
          name: "王小虎",
          amount1: "234",
          amount2: "165"
        },
        {
          id: "1",
          name: "王小虎",
          amount1: "165",
          amount2: "165"
        },
        {
          id: "2",
          name: "王小虎",
          amount1: "324",
          amount2: "165"
        },
        {
          id: "2",
          name: "王小虎",
          amount1: "621",
          amount2: "165"
        },
        {
          id: "2",
          name: "王小虎",
          amount1: "539",
          amount2: "165"
        }
      ],
    };
  },
  computed:{
    spanMethod : {
      get() {
        return this.spanMethod = getSpanMethod(this.orderData,['id'],['name','amount2']);
      },
      set(val) {
        return val;
      }
    }
  }
}
</script>

Set the table data in the el-table tag and add the span-method method

  <el-table :data="orderData" :span-method="spanMethod" border >
      <el-table-column prop="id" label="ID" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="100"></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>