vue elementUI合并单元格

vue elementUI合并单元格

一、实现效果

单元格合并

二、使用步骤

1.el-table

 <el-table v-loading="loading" :data="originData"  :span-method="objectSpanMethod" border>
</el-table>

2.methods方法

  //合并单元格
    objectSpanMethod ({ row, column, rowIndex,columnIndex }) {
    	//数据来源，，和:data="originData" 相同
      const dataProvider = this.originData;
      const cellValue = row[column.property]
      //方式第一条错误
      if (rowIndex !=0)
      {
        this.matchOwnerCode=row.ownerCode;
        let needMergeIndex= [1,2,3,4,5,6,7,8,9,10,11]
      if (cellValue && needMergeIndex.includes(columnIndex)) {
        // 上一条数据
        const prevRow = dataProvider[rowIndex - 1]
        // 下一条数据
        var nextRow=[];
        //该方法防止最后一条比较时 无法获取下一条
        if (rowIndex!=dataProvider.length-1)
        {
          nextRow = dataProvider[rowIndex + 1]
        }else
        {
          nextRow = dataProvider[rowIndex]
        }
        // 当上一条数据等于下一条数据，
        //row.ownerCode === prevRow.ownerCode用来限定合并依据需要加上合同编号判断
        if (prevRow && prevRow[column.property] == cellValue && row.ownerCode === prevRow.ownerCode) {
          return { rowspan: 0, colspan: 0 }
        } else {
          let rowspan = 1
      //row.ownerCode === prevRow.ownerCode用来限定合并依据需要加上合同编号判断
      while (nextRow && nextRow[column.property] == cellValue && row.ownerCode === nextRow.ownerCode  ) {

            rowspan++
            nextRow = dataProvider[rowspan + rowIndex]
          }
          if (rowspan > 1) {
            //返回为合并数据
            return { rowspan, colspan: 1 }
          }
        }
      }
      }
    },

---