el-table自定义合并表格

前沿 ：

        为了更好的展示数据，很多地方用到表格合并，但是element文档里面没有好的合并方法，只能自定义合并表格来解决需求。于是乎，写了以下方法，方面以后拿来即用。

 

自定义合并表格

 表格数据

 tableData: [
        {
          id: "1",
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          id: "1",
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          id: "2",
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          id: "3",
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          id: "3",
          date: "2016-05-08",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          id: "3",
          date: "2016-05-06",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          id: "4",
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
      ],

 计算每行需要合并的数量

  // 计算每行需要合并的数量   tableData为请求获取的表格数据源
  getSpanArr() {
    this.spanArr = [];
    for (let i = 0; i < this.tableData.datalist.length; i++) {
      if (i === 0) {
        this.spanArr.push(1);
        this.pos = 0;
      } else {
        // 判断当前元素与上一个元素的ID是否相同
        if (this.tableData.datalist[i].productId === this.tableData.datalist[i - 1].productId) {
          this.spanArr[this.pos] += 1;
          this.spanArr.push(0);
        } else {
          this.spanArr.push(1);
          this.pos = i;
        }
      }
    }

getSpanArr 方法：这个方法用于计算每一行需要合并的数量，并存储在 spanArr 数组中。使用 productId 来判断当前行是否与前一行相同，如果相同则增加合并数量，否则重置合并计数。

 

 // 根据列索引和 spanArr 中的值来确定单元格的 rowspan 和 colspan 

支持不合并的列，增加判断条件即可，如：不合并第五列 ：  columnIndex !== 5 

  // 根据列索引和 spanArr 中的值来确定单元格的 rowspan 和 colspan
  objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    // 页面列表上 表格合并行 -> 第几列(从0开始)
    // 需要合并多个单元格时 依次增加判断条件即可
    if (columnIndex !== 4 && columnIndex !== 5 && columnIndex !== 6) { 
      const _row = this.spanArr[rowIndex];
      const _col = _row > 0 ? 1 : 0;
      return {
        rowspan: _row,
        colspan: _col
      };
    } else {
      return false;
    }

 objectSpanMethod 方法： 这个方法根据列索引和 spanArr 中的值来确定单元格的 rowspan 和 colspan，从而实现表格行的合并。 我这里的需求是排除第4、5和6列的合并（基于0索引），其他列根据 spanArr 来设置合并属性。

// 异步获取数据并调用 getSpanArr 进行行合并计算

 getDataList() {
    //。。。。。
    this.tableData = res;
    //中间获取列表数据
    this.getSpanArr();
}

 附上效果图

 

🍉🍉🍉教程结束，觉得有帮助帮忙点个👍收藏关注，即拿即用，支持一下~