element-ui中的table分页勾选

2023-10-08 16:44:16

vue中使用el-table,常需要记住上一页所勾选的数据,实现步骤
1、在el-table中添加:row-key="getRowKeys"

 <el-table
      ref="form"
      :model="form"
      :row-key="getRowKeys"
      @selection-change="xz"
      ........

2、在第一列，即有多选框的一列，添加:reserve-selection="true"

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

3、在methods中添加函数：
```
getRowKeys(row) {
	return row.id
},
```
完成后需要清空选中,不然会在下一个批量操作中记录上一次选中的数据，
但如果你接下来的工作是跳转/刷新页面，那么这一步也可以省略，看你需求了：

this.$refs.form.clearSelection();

methods:{
    xz(val){//选中复选框操作
        console.log(val)
    }
}