element-ui表格合并

最新推荐文章于 2023-01-30 15:40:34 发布

码农小权权

最新推荐文章于 2023-01-30 15:40:34 发布

阅读量133

点赞数

本文链接：https://blog.youkuaiyun.com/qq_40280730/article/details/115907587

版权

使用官方的方法objectSpanMethod

              ...
            <el-table
              :data="scope.row.paperOrderList"
              @selection-change="selectTaskMain"
              :span-method="objectSpanMethod"
              :header-cell-style="{ background: '#ffcace', color: '#555' }"
            ></el-table>
             ...

方法：

    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 11) {        
    		       const _row = this.arrMask[rowIndex];
    		       const _col = _row > 0 ? 1 : 0;
    		       return {
    		       	rowspan: _row,
    		       	colspan: _col
    		       }
             }
    }

根据对用的条件给_row、_col赋值：

    rowspanMask (taskList) {
       var spanArrMask = []
       var positionMask = 0
       this.arrMask = []
       taskList.forEach((item,index) => { 
	      if (index === 0) {
	     	  spanArrMask.push(1)
	     	  positionMask = 0
	      } else {
	     	  	if (taskList[index].schoolName === taskList[index - 1].schoolName) {
                spanArrMask[positionMask] += 1
                 spanArrMask.push(0)
	     	  	} else { 
	     	  		spanArrMask.push(1)
               positionMask = index;
	     	  	}
	     	  }
	      })
        this.arrMask = spanArrMask
  	}