element table多选只能选中当前页数据_element-ui里的el-table 前端分页

在 Element UI 的 el-table 中，多选只能选中当前页数据的实现方式如下：

1. 在 el-table 中添加一个多选列：

<el-table-column type="selection" width="55"></el-table-column>

2. 定义一个数组用来保存选中的数据：

selectedRows: []

3. 添加一个事件监听器，当用户勾选多选列时，将当前页的选中数据保存到数组中：

handleSelectionChange(selection) {
  this.selectedRows = selection
}

4. 在 el-pagination 组件中添加一个事件监听器，当用户切换分页时，清空选中数据数组：

handleCurrentChange() {
  this.selectedRows = []
}

完整代码示例：

<template>
  <div>
    <el-table :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></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>
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      selectedRows: [],
      currentPage: 1,
      pageSize: 10,
      total: 100
    }
  },
  methods: {
    handleSelectionChange(selection) {
      this.selectedRows = selection
    },
    handleCurrentChange() {
      this.selectedRows = []
    }
  }
}
</script>