elementui表格跨分页勾选

您好！要在 Element UI 表格中实现跨分页勾选，您可以按照以下步骤进行操作：

1. 首先，在表格的数据源中添加一个属性用于记录选中状态，例如 `isSelected`。
2. 在表格的列定义中添加一个自定义列，用于显示勾选框，并绑定到 `isSelected` 属性。
3. 在表格组件中添加一个 `selection-change` 事件监听器，以便在选中状态改变时更新数据源中的 `isSelected` 属性。
4. 在分页组件中添加一个 `current-change` 事件监听器，以便在切换分页时重新计算选中状态。
5. 在表格组件中添加一个全局的勾选框，用于实现全选功能。

下面是一个示例的代码片段，演示了如何实现跨分页勾选：

<template>
  <div>
    <el-table
      :data="tableData"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" :selectable="selectable" width="55">
        <template slot-scope="{row}">
          <el-checkbox v-model="row.isSelected"></el-checkbox>
        </template>
      </el-table-column>
      <!-- 其他列定义 -->
    </el-table>
    <el-pagination
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    };
  },
  methods: {
    handleSelectionChange(selection) {
      // 更新数据源中的 isSelected 属性
      this.tableData.forEach(row => {
        row.isSelected = selection.includes(row);
      });
    },
    handlePageChange(page) {
      // 切换分页时重新计算选中状态
      this.currentPage = page;
      this.loadData();
    },
    loadData() {
      // 根据当前分页参数加载数据
      // 注意根据实际情况进行分页请求和数据更新
    },
    selectable(row) {
      // 控制是否允许选择
      return row.isSelected || !this.isAllSelected;
    }
  },
  computed: {
    isAllSelected() {
      // 判断是否全选
      return this.tableData.every(row => row.isSelected);
    }
  },
  mounted() {
    this.loadData();
  }
};
</script>

请注意，以上代码仅为示例，您需要根据您的实际需求进行适当的修改和调整。

希望这能帮到您！如果您有任何其他问题，请随时提问。