VUE elementUI Table 使用span-method（实现多列行合并）

首先看下实现效果

  官方例子

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {//哪一列可以合并（第一列）
          if (rowIndex % 2 === 0) {//满足合并行的条件（偶数行）
            return {
              rowspan: 2,//合并的行数
              colspan: 1 //合并的列数，设为０则直接不显示
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }

 element-ui官网中关于行合并的例子是根据行号进行合并的，这显然不符合我们日常开发需求，因为通常我们table中的数据都是动态生成的，所以需要做一些修改。

在初始化的data中定义：

   tableData: [
        {
          id: "保险杠",
          name: "A1568804340 9999",
          amount1: "234",
          amount2: "3.2",
          amount3: 10,
        },
        {
          id: "保险杠",
          name: "A2538850001 9999",
          amount1: "165",
          amount2: "4.43",
          amount3: 12,
        },
        {
          id: "保险杠",
          name: "A2538851101 9999",
          amount1: "324",
          amount2: "1.9",
          amount3: 9,
        },
        {
          id: "小件",
          name: "A1568859400 9999",
          amount1: "621",
          amount2: "2.2",
          amount3: 17,
        },
        {
          id: "小件",
          name: "A1568803740 9999",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
      ],
      mergerItems: [
        { columnIndex: 0, spanArr: [], pos: 0, prop: "id" },
        { columnIndex: 1, spanArr: [], pos: 0, prop: "name" },
      ],

然后在methods钩子函数中定义如下

  cellMerge({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1) {
        //这里判断第几列需要合并
        let item = this.mergerItems.find(
          (item) => item.columnIndex === columnIndex
        );
        const _row = item.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    getSpanArr(data, array) {
      //循环数据处理
      for (let n = 0; n < array.length; n++) {
        array[n].spanArr = []; //数据清空(重新调此方法的时候需要清空上一次的数据)
        for (let i = 0; i < data.length; i++) {
          if (i === 0) {
            array[n].spanArr.push(1);
            array[n].pos = 0;
          } else {
            // 判断当前元素与上一个元素是否相同
            if (data[i][array[n].prop] === data[i - 1][array[n].prop]) {
              array[n].spanArr[array[n].pos] += 1;
              array[n].spanArr.push(0);
            } else {
              array[n].spanArr.push(1);
              array[n].pos = i;
            }
          }
        }
      }
    },

table表格中调用

 <!--表格渲染-->
    <el-table
      :data="tableData"
      :span-method="cellMerge"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="id" label="喷涂" width="180"> </el-table-column>
      <el-table-column prop="name" label="零件编号"> </el-table-column>
      <el-table-column prop="amount1" label="总订单数"> </el-table-column>
      <el-table-column prop="amount2" label="总库存"> </el-table-column>
      <el-table-column prop="amount3" label="数值 3（元）"> </el-table-column>
    </el-table>

说明：

上面数据需要注意的是mergerItems里面columnIndex 一定要与你需要合并的列对应上：例如我这个就是第一列以及第二列合并（因为columnIndex 就是一个标记，可以根据这个字段找到对应的列下面所记录需要合并行的信息）。mergerItems里面prop对应的就是tableData里面需要合并的字段对应上（这里的tableData我写死了，具体tableData的数据还是得看后台怎么定义的）
调用：this.getSpanArr(this.tableData, this.mergerItems)在请求到表格数据后进行调用或者表格数据更新后再次调用。

标签：VUE,span,name,spanArr,elementUI,合并,columnIndex,array,id
来源： https://www.cnblogs.com/netcore-vue/p/14849180.html