Elementui中 toggleRowSelection() 方法实现分页切换时记录之前选中的状态

先说下需求:表格导出功能。用户可以自定义选择导出的表格数据。

遇到的问题:使用el-table组件的selection属性,可以实现多选表格数据的功能。但是el-table组件在翻页的时候,不会记录上一页的选项,再切换回上一页时,之前勾选过的选项会被清空。

解决方案:使用toggleRowSelection()方法设置勾选项。

思路:之前是使用一个数组记录当前页选中的选项,现在用一个数组记录每一页选中的选项

    Step1: 在selection-change事件中绑定以下方法。需要注意的是,每次换页的时候,如果之前有勾选选项,则表格选择项会发生变化(之前勾选,换页之后不勾选),触发该函数,所以需要在换页时增加一个标志量,判断是由于换页触发的该函数还是由于勾选变化触发的该函数。

                    

    Step2:在换页之后,使用 toggleRowSelection() 方法,将之前勾选中的选项重新勾选。我之前是放在换页函数中的,发现没有重新渲染,参考这篇博客后:

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
如果你使用的是 antd 的 Table 组件,可以通过以下步骤来实现分页切换保留之前选中项: 1. 在 Table 组件,设置 rowSelection 属性,该属性用于控制行选择功能。 2. 在 rowSelection ,设置 selectedRowKeys 属性,该属性用于存储当前选中的行的 key 值。 3. 在 onChange 回调函数,通过参数 pagination 获取当前的分页信息,并将 selectedRowKeys 存储到 state 。 4. 在 render ,通过 state 的 selectedRowKeys 属性,将之前选中的行重新选中。 下面是一个示例代码: ``` class MyTable extends React.Component { state = { selectedRowKeys: [], // 存储当前选中的行的 key 值 }; onSelectChange = selectedRowKeys => { // 更新选中的行 this.setState({ selectedRowKeys }); }; render() { const { selectedRowKeys } = this.state; const rowSelection = { selectedRowKeys, onChange: this.onSelectChange, }; const dataSource = [ { key: '1', name: 'Mike' }, { key: '2', name: 'John' }, { key: '3', name: 'Lucy' }, { key: '4', name: 'Tom' }, ]; const columns = [ { title: 'Name', dataIndex: 'name', key: 'name' }, ]; return ( <Table rowSelection={rowSelection} dataSource={dataSource} columns={columns} pagination={{ pageSize: 2, onChange: (page, pageSize) => { // 获取当前分页选中行 const { selectedRowKeys } = this.state; // 更新分页信息 this.setState({ selectedRowKeys: [], }); }, }} /> ); } } ``` 在上面的代码,我们定义了一个 Table 组件,该组件包含一个 rowSelection 属性,用于控制行选择功能。在 onChange 回调函数,我们获取当前的分页信息,并将之前选中的行存储到 state 。在 render ,我们通过 state 的 selectedRowKeys 属性,将之前选中的行重新选中

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值