el-table 选择时有合并的行 如何全选

当el-table中有合并的行时，全选操作需要注意以下几点：

1. 需要将合并的行看做一个整体来处理，即选中一个合并的行则该行中的所有单元格都会被选中。

2. 需要特别处理合并的行的起始和终止位置。例如，如果合并的行跨越了多个页，全选操作需要将所有页中的合并行都选中。

3. 可以通过el-table的selection-change事件来监听选中状态的变化，然后手动更新所有合并行的选中状态。

示例代码如下：

<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>

在上面的示例代码中，我们通过getMergedRows方法获取所有合并的行，并在selection-change事件中遍历所有合并行，更新选中状态。isRowSelected方法用于判断一组行是否被选中，updateRowSelectedStatus方法用于更新一组行的选中状态。注意，在更新选中状态时，需要同时更新selectedRows数组，以保持与el-table组件的选中状态同步