element-ui table 合并单元格--合并行和列

• 1.合并单元格
• 2.鼠标浏览事件
• 3.完成代码，添加更多-根据状态显示部分颜色框

1.合并单元格

2.鼠标浏览事件

//在el-table上面添加
:cell-class-name="tableRowClassName"
        @cell-mouse-leave="cellMouseLeave"  @cell-mouse-enter="cellMouseEnter"

rowIndex: -1,
OrderIndexArr: [],
hoverOrderArr: [],

 mounted() {
    this.merage();
    this.getOrderNumber()
  },

getOrderNumber() {
      this.OrderIndexArr=[]
        let OrderObj = {}
        this.tableData.forEach((item, index) => {
            item.rowIndex = index
            if (OrderObj[item.firstRisk]) {
              OrderObj[item.firstRisk].push(index)
            } else {
              OrderObj[item.firstRisk] = []
              OrderObj[item.firstRisk].push(index)
            }
        })
        console.log(this.tableData,this.tableData,OrderObj);
        // 数组的长度大于1的值 存储到this.OrderIndexArr（即需要合并的项目）/第一个列表是准列表。firstRisk
        for (let k in OrderObj) {
          if (OrderObj[k].length > 1) {
            this.OrderIndexArr.push(OrderObj[k])
          }
        }
        console.log(this.OrderIndexArr,this.OrderIndexArr);
      },

      tableRowClassName({row,rowIndex}) {
        let arr = this.hoverOrderArr
        for (let i = 0; i < arr.length; i++) {
          if (rowIndex == arr[i]) {
            return hovered-row//成功的风格
          }
        }
      },
      //鼠标经过
      cellMouseEnter(row, column, cell, event) {
        console.log("row.rowIndex",row.rowIndex);
        this.rowIndex = row.rowIndex;
        this.hoverOrderArr = [];
        this.OrderIndexArr.forEach((item,index) => {
            if (item.indexOf(this.rowIndex) >= 0) {
              this.hoverOrderArr = item
            }
        })
      },
       //鼠标左键，初始化
      cellMouseLeave(row, column, cell, event) {
        this.rowIndex = -1
        this.hoverOrderArr = [];
      },

3.完成代码，添加更多-根据状态显示部分颜色框