antd请求翻页时记住勾选的数据,将数据保存在selectedRows中回显,不受分页影响
在使用antd的rowSelection多选配置时,每次翻页后,勾选的selectedRows只会显示当前页的,其他页面的数据就会丢失。
·
问题描述:
在使用antd的rowSelection多选配置时,每次翻页后,勾选的selectedRows只会显示当前页的,其他页面的数据就会丢失。
实现效果(不同分页的数据):
<a-table
rowKey="id"
:row-selection="rowSelection"
:columns="columns"
:data-source="list"
:pagination="pagination"
:scroll="{ y: 400 }"
>
</a-table>
<!-- 展示已勾选数据 -->
<a-table
:columns="columns"
:data-source="selectedRows"
:pagination="false"
:scroll="{ y: 400 }"
>
</a-table>
data(){
selectedRows: [],
rowSelection: {
selectedRowKeys: [],
onChange: (selectedRowKeys) => {
this.rowSelection.selectedRowKeys = selectedRowKeys
},
onSelect: (record, selected) => {
if (selected) {
this.selectedRows.push(record)
} else {
this.selectedRows = this.selectedRows.filter(el => el.id != record.id)
}
},
},
}

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐
所有评论(0)