element的表头动态合并

**

element的表头自定义动态合并

**

效果图

//用来合并的方法:span-method="objectSpanMethod"
  <el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        border
        stripe
        show-summary
        style="width: 100%;"
      >
        <el-table-column prop="couponType" label="类别"> </el-table-column>
        <el-table-column prop="couponName" label="名称"> </el-table-column>
        <el-table-column prop="issue" label="下发"> </el-table-column>
        <el-table-column prop="writeOff" label="核销"> </el-table-column>
      </el-table>

封装方法用来，组装后台返回的数据，按什么合并

//根据某个字段排序table表格，让指定表格的数据重新排列table
export const tableSort = function (table, val) {
    let data = [];
    let types = [];

    table.forEach((item, index) => {
        if (types.includes(item[val]) == false) {
            types.push(item[val]);
        }
    });
    types.forEach((item, index) => {
        for (let i = 0; i < table.length; i++) {
            if (item == table[i][val]) {
                data.push(table[i]);
            }
        }
    });
    // console.log(types);
    // console.log(data);
    return data;
};

//根据某个字段来组装table合并数据
export const assemble = function (data, val) {
    let date = {
        merge: [],
        pos:0
    }
    for (var i = 0; i < data.length; i++) {
        if (i === 0) {
            date.merge.push(1);
            date.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          //根据相同id进行合并,根据需要可进行修改
            if (data[i][val] === data[i - 1][val]) {
             date.merge[date.pos] += 1;
            date.merge.push(0);
          } else {
            date.merge.push(1);
            date.pos = i;
          }
        }
    }
    return date;
}

element合并的方法

 objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {//合并第几列
        const _row = this.merge[rowIndex]; //上边的table合并数据返回的merge
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,//几行合并成一行
          colspan: _col,//1为合并，0为隐藏
        };
      }
    },