element-plus table树形数据合并单元格

如果需要合并单元格的某列数据涉及到父-子两级的数据，合并单元格时需要考虑到在展开和合并时rowspan

    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      :row-key="id"
      @expand-change="handleRowExpand"
    >
      <el-table-column label="产品" prop="productName" />
      <el-table-column label="种类" prop="productType" />
    </el-table>

点击展开折叠时设置row的展开状态

function handleRowExpand(row, expanded) {
  row.expanded = expanded
}

合并单元格的时候判断row 的展开状态

const mergeColumn = 1 // 需要合并的列
const mergeColumnMap = {} // 要合并的的个数
function objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  if (mergeColumn === columnIndex) {
    if (row.type === '1') { // 需要从这里开始合并
      return { rowspan: row.expanded ? mergeColumnMap[row.id] : 1, colspan: 1 }
    }
    return { rowspan: 0, colspan: 0 }
  }
}