Element-UI中，el-table动态合并多列的行

在使用Element-UI的el-table组件时，我们有时需要根据数据动态合并行或列，以更好地展示数据。在本文中，我们将介绍如何在Element-UI中实现这一功能。

1. 基础知识

在Element-UI的el-table组件中，我们可以使用span-method属性来控制行和列的合并。span-method接收一个方法，该方法的参数是一个对象，包含当前行的行号、列号、行数据和列数据，返回一个包含两个元素的数组，第一个元素是行合并的数量，第二个元素是列合并的数量。

2. 实现动态合并行

假设我们有一个表格，需要根据’platformDept’和’projectCompany’字段动态合并行。我们可以定义一个flitterData方法来计算每一行的合并行数，然后在span-method中使用这个方法。

flitterData(arr, name) {
  let spanOneArr = []
  let concatOne = 0
  arr.forEach((item, index) => {
    if (index === 0) {
      spanOneArr.push(1)
    } else {
      if (item[name] === arr[index - 1][name]) {
        spanOneArr[concatOne] += 1
        spanOneArr.push(0)
      }else {
        spanOneArr.push(1)
        concatOne = index
      }
    }
  })
  return {
    one: spanOneArr,
  }
},

在span-method中，我们可以使用flitterData方法来获取每一行的合并行数：

objectSpanMethod({row, column, rowIndex, columnIndex}) {
  if (columnIndex === 1) {
    const _row = this.flitterData(this.performanceList, 'platformDept').one[rowIndex]
    const _col = _row > 0 ? 1 : 0
    return {
      rowspan: _row,
      colspan: _col,
    }
  } else if (columnIndex === 2) {
    const _row = this.flitterData(this.performanceList, 'projectCompany').one[rowIndex]
    const _col = _row > 0 ? 1 : 0
    return {
      rowspan: _row,
      colspan: _col,
    }
  }
},

3. 效果

4. 结论

通过上述方法，我们可以在Element-UI的el-table组件中实现动态合并行的功能。这种方法虽然需要一些额外的计算，但是它提供了足够的灵活性，可以根据实际的需求来控制行和列的合并。