element ui表格根据id值合并列

element ui表格根据id值合并列

效果

首先 官方文档给的由例子
地址
html

 <el-table
      :data="tableData6"
      :span-method="objectSpanMethod"
      border
      style="width: 100%">
      <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"
        sortable
        label="数值 1">
      </el-table-column>
      <el-table-column
        prop="amount2"
        sortable
        label="数值 2">
      </el-table-column>
      <el-table-column
        prop="amount3"
        sortable
        label="数值 3">
      </el-table-column>
    </el-table>

:span-method=“objectSpanMethod” 其中这个方法是重点

 objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex % 2 === 0) {
            return {
              rowspan: 2,
              //合并两列
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }
    }

现在至于要把上面方法中的 return的rowspan与colspan的值改变为表格中id相同的数据的行和列
完整代码

//获得数据相同的行数
 rowspan() {
			 //每次调用清空数据
            this.spanArr=[];
            this.position=0
            this.tableData.forEach((item,index) => {
                if( index === 0){
                    this.spanArr.push(1);
                    this.position = 0;
                }else{
                    if(this.tableData[index].id === this.tableData[index-1].id ){
                        this.spanArr[this.position] += 1;
                        this.spanArr.push(0);
                    }else{
                        this.spanArr.push(1);
                        this.position = index;
                    }
                }
            })
        },
 //合并
 objectSpanMethod({ row, column, rowIndex, columnIndex }) {  //表格合并行
            if (columnIndex === 0) {
                const _row = this.spanArr[rowIndex];
                const _col = _row>0 ? 1 : 0;
                return {
                    rowspan: _row,
                    colspan: _col
                }
            }
            if(columnIndex === 1){
                const _row = this.spanArr[rowIndex];
                const _col = _row>0 ? 1 : 0;
                return {
                    rowspan: _row,
                    colspan: _col
                }
            }
        }, 

objectSpanMethod方法是绑定到表格上的 不用做处理
rowspan()方法需要页面初始化获取数据的时候启用或者在查询后启用

对于后端,传过来的数据需要进行检索 id值相同的数据要放在一起传 否则合并效果不完美