el-table跨页全选

el-table 是 Element UI 提供的表格组件，跨页全选指的是在表格分页情况下，实现全选功能。

要实现 el-table 的跨页全选，可以按照以下步骤进行操作：

1. 设置表格的 selection 属性为 true，开启选择模式：

<el-table :data="tableData" :selection="true">
  <!-- 表格列配置 -->
</el-table>

2. 定义一个变量 selectedRows 来保存选中的行数据：

data() {
  return {
    tableData: [], // 表格数据源
    selectedRows: [] // 选中的行数据
  };
}

3. 监听表格的 selection-change 事件，将选中/取消选中的行数据保存到 selectedRows 变量中：

<el-table :data="tableData" :selection="true" @selection-change="handleSelectionChange">
  <!-- 表格列配置 -->
</el-table>

methods: {
  handleSelectionChange(val) {
    this.selectedRows = val;
  }
}

4. 在表格的底部插槽中添加全选按钮，并绑定全选/取消全选的方法：

<template slot="footer">
  <el-checkbox v-model="isAllSelected" @change="handleSelectAll"></el-checkbox>
</template>

data() {
  return {
    tableData: [], // 表格数据源
    selectedRows: [], // 选中的行数据
    isAllSelected: false // 是否全选
  };
},

methods: {
  handleSelectAll() {
    if (this.isAllSelected) {
      this.selectedRows = [...this.tableData];
    } else {
      this.selectedRows = [];
    }
  }
}

5. 判断当前页的所有行是否都被选中，更新全选按钮的状态：

<template slot="footer">
  <el-checkbox v-model="isAllSelected" @change="handleSelectAll"></el-checkbox>
</template>

methods: {
  handleSelectAll() {
    if (this.isAllSelected) {
      this.selectedRows = [...this.tableData];
    } else {
      this.selectedRows = [];
    }
  },

  // 监听表格数据的变化
  tableDataChange(newData) {
    if (newData.length === 0) {
      this.isAllSelected = false;
    } else {
      this.isAllSelected = this.selectedRows.length === newData.length;
    }
  }
},

watch: {
  tableData: {
    handler: 'tableDataChange',
    immediate: true
  }
}

通过以上步骤，你可以在 el-table 中实现跨页全选功能。当表格分页时，选中某一页的行数据后，可以点击全选按钮将当前页及其他已选中的页的行数据全部选中，取消全选则取消所有已选中的行数据。