elementUI合并单元格

<el-table :data="tableDataFormat" border :header-cell-style="{background:'#FAFAFA'}" :span-method="arraySpanMethod" :row-class-name="rowClassName" @cell-mouse-enter="handleMouseEnter" @cell-mouse-leave="handleMouseLeave">

 

 

data(){

    return {

      spanArr:[],

      tableData:[], //元数据

      tableDataFormat:[],//format后的数据

      cellIndex: -1,

    }

  },

 

 

// 鼠标进入单元格

    handleMouseEnter(row, column, cell, event) {

      this.tableDataFormat.forEach((item) => {

        // console.log(row.order,item.order)

        if (row.order === item.order) {

          this.cellIndex = row.order;

        }

      })

    },

    // 给相应的rowIndex添加类名

    rowClassName({ row, rowIndex }) {

        let r = -1;

        this.tableDataFormat.forEach((item) => {

          if (this.cellIndex === row.order) {

            r = rowIndex;

          }

        });

        if (rowIndex === r) {

          return 'hover-row';

        }

      },

      // 鼠标离开

    handleMouseLeave(row, column, cell, event) {

      this.cellIndex = -1;

    },

    arraySpanMethod({ row, column, rowIndex, columnIndex }) {

      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4  || columnIndex === 9) {

          const _row = this.spanArr[rowIndex];

          const _col = _row > 0 ? 1 : 0;

          // console.log(`rowspan:${_row} colspan:${_col}`)

          return { // [0,0] 表示这一行不显示， [2,1]表示行的合并数

                rowspan: _row,

                colspan: _col

          }

        }

      },

    getSpanArr(data) {　

        for (var i = 0; i < data.length; i++) {

          if (i === 0) {

            this.spanArr.push(1);

            this.pos = 0

          } else {

            // 判断当前元素与上一个元素是否相同

          if (data[i].strategy_id === data[i - 1].strategy_id) {

              this.spanArr[this.pos] += 1;

              this.spanArr.push(0);

            } else {

              this.spanArr.push(1);

              this.pos = i;

            }

          }

          // console.log(this.spanArr)

      }

    },