ant-design-vue的

Ant Design Vue 中,preserveSelectedRowKeys 是用于 Table 组件的一项属性,主要作用是控制在表格数据变化(如分页、过滤、排序等)时,是否保留已选择行的 rowKey

默认行为

当你使用行选择功能(rowSelection)并且更改了分页、过滤条件或排序时,默认情况下表格会清除当前页之外的选中项。这是因为表格会认为当前显示的数据已经发生了变化。

preserveSelectedRowKeys 的作用

如果设置 preserveSelectedRowKeystrue,即使表格数据变化(如分页、排序等),已选中的行依然会被保留。它确保选中的 rowKey 不会因为表格重新渲染而丢失。

html 复制代码
  <a-table
    :row-selection="rowSelection"
    :columns="columns"
    :data-source="data"
    :pagination="pagination"
    :row-key="record => record.id"
    :preserve-selected-row-keys="true"
  />

注意在rowSelection 里面使用,且返回computed

javascript 复制代码
const selectKeys = ref<Key[]>([]);
const rowSelection = computed<ProTableProps['rowSelection']>(() => ({
  selectedRowKeys: selectKeys.value,
  preserveSelectedRowKeys: true,
  onChange(values: Key[]) {
    selectKeys.value = values;
  },
}));
相关推荐
前端炒粉2 小时前
长会话虚拟滚动与渲染优化
前端·javascript·vue.js
sibylyue3 小时前
基于 Vben Admin 框架的 Vue 3 前端项目配置文件及常用命令
前端·javascript·vue.js
小蒜学长6 小时前
vue旅游攻略网站(代码+数据库+LW)
java·数据库·vue.js·spring boot·后端·旅游
sir.山1 天前
在 Vue 3 项目中使用 Mock 数据
前端·vue.js·vue3·vite
你别说话了2 天前
Vue项目解决跨域
前端·javascript·vue.js
学习星球2 天前
Solid.js 实战:拆解官方 RealWorld 项目
开发语言·javascript·vue.js
尚可签2 天前
基于 Spring Boot + Vue 的 AI 智能在线订餐系统
vue.js·人工智能·spring boot
MacroZheng2 天前
腾讯又开源了一个新项目,用起来真优雅!
前端·vue.js·人工智能
张人玉2 天前
基于 Vue 3 + ECharts + Three.js + Express + SQLite——智慧城市数字孪生可视化平台
javascript·vue.js·信息可视化·sqlite·echarts
山川志~2 天前
Vue + Element UI 实战:如何实现表格时间、金额字段排序
vue.js·ui·elementui