el-table使用span-method合并单元格

114 阅读1分钟

记录项目中遇到的问题:项目中数据返回的多个一样的id 根据id去合并单元格 data里面的数据 tableData: [ { cysG_BM: '12987122', jzR_MZH: '王小虎', cysj: '234', jzR_XM: '3.2', jyxM_JGDW: 10, }, { cysG_BM: '12987122', jzR_MZH: '王小虎', cysj: '165', jzR_XM: '4.43', jyxM_JGDW: 12, }, { cysG_BM: '12987124', jzR_MZH: '王小虎1', cysj: '324', jzR_XM: '1.9', jyxM_JGDW: 9, }, { cysG_BM: '12987123', jzR_MZH: '王小虎2', cysj: '621', jzR_XM: '2.2', jyxM_JGDW: 17, }, { cysG_BM: '12987123', jzR_MZH: '王小虎2', cysj: '539', jzR_XM: '4.1', jyxM_JGDW: 15, }, ],

  // 使用计算属性对哪行需要合并进行处理
computed: {
tableDataColumn() {
  const obj = {};
  this.tableData.forEach((v, i) => {
    const id = v.cysG_BM;
    if (obj[id]) {
      obj[id].push(i);
    } else {
      obj[id] = [];
      obj[id].push(i);
    }
  });

  return obj;
},
}

 objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  // 判断从哪行开始合并
  if (columnIndex < 11) {
    if (rowIndex > 0 && row.cysG_BM === this.tableData[rowIndex - 1].cysG_BM) {
      return {
        rowspan: 0,
        colspan: 0,
      };
    } else {
      const id = row.cysG_BM;
      const rows = this.tableDataColumn[id];
      const length = rows.length;
      return {
        rowspan: length,
        colspan: 1,
      };
    }
  }
},

效果:

微信图片_20240530113447.png