Element UI el-table 合并行全选操作详解

<template>
  <el-table :data="tableData" @selection-change="handleSelectionChange">
    <el-table-column type="selection"></el-table-column>
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
    <el-table-column label="Address">
      <el-table-column prop="province" label="Province"></el-table-column>
      <el-table-column prop="city" label="City"></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: 'John Brown',
          age: 18,
          province: 'New York',
          city: 'New York',
          address: 'No.1 Lake Park'
        },
        {
          name: 'Jim Green',
          age: 24,
          province: 'Washington',
          city: 'Seattle',
          address: 'No.2 Lake Park'
        },
        {
          name: 'Joe Black',
          age: 30,
          province: 'California',
          city: 'San Francisco',
          address: 'No.3 Lake Park'
        },
        {
          name: 'Tom Cat',
          age: 36,
          province: 'Texas',
          city: 'Dallas',
          address: 'No.4 Lake Park'
        }
      ],
      selectedRows: []
    }
  },
  methods: {
    handleSelectionChange(selection) {
      // 遍历所有合并的行，更新选中状态
      const mergedRows = this.getMergedRows()
      mergedRows.forEach(row => {
        const startRowIndex = this.tableData.indexOf(row)
        const endRowIndex = startRowIndex + row.rowspan - 1
        const isSelected = this.isRowSelected(startRowIndex, endRowIndex, selection)
        if (isSelected !== row.isSelected) {
          this.updateRowSelectedStatus(row, isSelected)
        }
      })
    },
    getMergedRows() {
      // 获取所有合并的行
      const mergedRows = []
      let rowIndex = 0
      this.tableData.forEach(row => {
        if (row.rowspan > 1) {
          mergedRows.push({
            ...row,
            rowIndex,
            isSelected: this.isRowSelected(rowIndex, rowIndex + row.rowspan - 1, this.selectedRows)
          })
        }
        rowIndex += row.rowspan || 1
      })
      return mergedRows
    },
    isRowSelected(startRowIndex, endRowIndex, selection) {
      // 判断一组行是否被选中
      return selection.some(row => {
        const rowIndex = this.tableData.indexOf(row)
        return rowIndex >= startRowIndex && rowIndex <= endRowIndex
      })
    },
    updateRowSelectedStatus(row, isSelected) {
      // 更新一组行的选中状态
      for (let i = row.rowIndex; i < row.rowIndex + row.rowspan; i++) {
        const rowItem = this.tableData[i]
        rowItem.isSelected = isSelected
        if (isSelected) {
          this.selectedRows.push(rowItem)
        } else {
          const index = this.selectedRows.findIndex(item => item === rowItem)
          if (index !== -1) {
            this.selectedRows.splice(index, 1)
          }
        }
      }
    }
  }
}
</script>