vue element-ui el-table的列和行的合并

el-table的列和行的合并

给table传入span-method方法可以实现合并行或列
返回 { row, column, rowIndex, columnIndex }

ps:
// rowIndex 行标识 对第几行 进行操作
// columnIndex 列标识 对第几列 进行操作
// rowspan: _row, // rowspan 单元格可横跨的行数 0跨到最后一行
// colspan: _col // colspan 单元格可横跨的列数 0跨到最后一列

<el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%">
	<el-table-column prop="id" label="ID"> </el-table-column>
	<el-table-column prop="name" label="姓名"> </el-table-column>
	<el-table-column prop="amount1" label="数值 1（元）"> </el-table-column>
	<el-table-column prop="amount2" label="数值 2（元）"> </el-table-column>
	<el-table-column prop="amount3" label="数值 3（元）"> </el-table-column>
</el-table>

data() {
    return {
      spanArr: [],//用于存放每一行记录的合并数
      pos: '',
      tableData: [
        {
          id: '12987123',
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987123',
          name: '王小虎',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }
      ]
  }
}

    getData() {
      this.getSpanArr(this.tableData)
    },
    getSpanArr(data) {
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].id === data[i - 1].id) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 行数据，列数据，行标识，列标识。
      // rowIndex    行标识  对第几行 进行操作
      // columnIndex 列标识  对第几列 进行操作

      // columnIndex === 0 即对第一列操作
      // rowIndex  === 0 即对第一行操作
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row, //单元格可横跨的行数  0跨到最后一行
          colspan: _col  //单元格可横跨的列数  0跨到最后一列
        }
      }
    },

rowspan: _row, //单元格可横跨的行数  0跨到最后一行
colspan: _col  //单元格可横跨的列数  0跨到最后一列

直接写数字时

eg：  _row = 1, _col = 1  不合并
	  _row = 1, _col = 8  每行合并前8列


合并后几列  需要配合 rowIndex  columnIndex   进行合并
	  // rowIndex    行标识  对第几行 进行操作
      // columnIndex 列标识  对第几列 进行操作
eg： 这是 每一行 合并第7列至最后一列（13列），并只有某个值等于1时才 合并后面的8列
      if (columnIndex < 6) {
        return {
          rowspan: 1,
          colspan: 1
        }
      } else {
        if (row.delFlag == 1) {
          return {
            rowspan: 1,
            colspan: 8
          }
        } else {
          return {
            rowspan: 1,
            colspan: 1
          }
        }
      }

 每行合并列 后 只显示已合并中的第一列的值