Element-ui 表格合并行 elemen合并行 element-ui 合并行 表格合并行

合并方法

思路：比如说现在 要合并三行数据， 第一行固定设置 合并行数量 为3，第二行，第三行固定0 ，这样就是合并了三行

 <el-table
              ref="table"
              v-loading="loading"
              element-loading-text="拼命加载中"
              :data="tableData"
              :highlight-current-row="true"
              max-height="800"
              size="mini"
              stripe
              border
              show-summary
              :span-method="objectSpanMethodDay"
            >
              <el-table-column align="center" label="维修日期" prop="maintenanceDate" width="100" sortable />

              <el-table-column align="center" label="维修人" prop="maintenanceName" width="100" />

              <el-table-column align="center" label="技能等级" prop="workerLevel" width="80" />

             
</el-table>

data() {
    
    
    // 这里存放数据
    return {
    
    
      loading: false,
      tableData: [],
      spanArr: [],
      pos: ''
    }
  },

    // 加载表格数据
    loadTableData() {
    
    
      this.loading = true
      request({
    
    
        url: '',
        method: 'GET'
      }).then((res) => {
    
    
      	// 计算数据要合并的行
        this.getSpanArr(res.data.list)
        this.tableData = res.data.list
        this.loading = false
      }).catch(() => {
    
    
        this.loading = false
      })
    },
    
	// 计算要合并的行
    getSpanArr(data) {
    
    
      // data就是我们从后台拿到的数据
      for (var i = 0; i < data.length; i++) {
    
    
        if (i === 0) {
    
    
          this.spanArr.push(1)
          this.pos = 0
        } else {
    
    
          // 判断当前元素(日期， 维修人)与上一个元素是否相同，只需要改这个条件就可以了
          if (data[i].maintenanceDate === data[i - 1].maintenanceDate && data[i].maintenanceName === data[i - 1].maintenanceName) {
    
    
            // 这个逻辑就是，比如说现在 要合并三行数据， 第一行固定设置 合并行数量 为3，第二行，第三行固定0 ，这样就是合并了三行
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
    
    
            this.spanArr.push(1)
            this.pos = i
          }
        }
        console.log(this.spanArr)
      }
    },
    // 合并行 
    objectSpanMethodDay({
     
      row, column, rowIndex, columnIndex }) {
    
    
      // 那一列需要合并，合并 第一列第二列 日期 + 维修人
      if (columnIndex === 1 || columnIndex === 2) {
    
    
        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
        }
      }
    }

效果图