el-table自定义合并行或列-蒲公英云

el-table自定义合并行或列

在这里插入图片描述

ElementUI：通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。也可以返回一个键名为rowspan和colspan的对象。

模板部分：

<el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px">
      <el-table-column prop="date" align="center" label="时间日期" width="120"></el-table-column>
      <el-table-column prop="time" label="单位" width="120"></el-table-column>
      <el-table-column prop="unit" label=""></el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="amount1"
        label="数值 1（元）">
      </el-table-column>
      <el-table-column
        prop="amount2"
        label="数值 2（元）">
      </el-table-column>
      <el-table-column
        prop="amount3"
        label="数值 3（元）">
      </el-table-column>
    </el-table>

js 部分

data() { 
  return { 
    spanArr: [],
    pos: 0
  }
},
watch: { 
  tableData: { 
    handler () { 
      this.getSpanArr(this.tableData)
    },
    immediate: true
  }
},
methods: { 
    // 根据条件合并随意行数，因为合并的行数可能是不固定的（传入的data参数为从后台数据数据）
    getSpanArr(data) { 
      this.spanArr = []
      this.pos = 0
      for (var i = 0; i < data.length; i++) { 
        if (i === 0) { 
          // 如果是第一条记录（即索引是0的时候），向数组中加入１
          this.spanArr.push(1)
          this.pos = 0
        } else { 
          if (data[i].date === data[i - 1].date) { 
            // 如果date相等就累加，并且push 0 （这里的判断视自己的判定依据改变）
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else { 
            // 不相等push 1
            this.spanArr.push(1)
            this.pos = i
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) { 
      // 用于设置要合并的列 0 表示第一列
      if (columnIndex === 0) { 
        const cRow = this.spanArr[rowIndex]
        const cCol = cRow > 0 ? 1 : 0
        return { 
          rowspan: cRow, // 合并的行数
          colspan: cCol // 合并的列数，为0表示不显示
        }
      }
    }
}