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;
  },
}));
相关推荐
小磊哥er1 小时前
【前端AI实践】泛谈AI在前端领域的应用场景
前端·vue.js·ai编程
清幽竹客1 小时前
vue-14(使用 ‘router.push‘ 和 ‘router.replace‘ 进行编程导航)
前端·vue.js
王者鳜錸2 小时前
Vue3+SpringBoot全栈开发:从零实现增删改查与分页功能
vue.js·spring boot·后端
每天都想睡觉的19002 小时前
Vue 的 keep-alive 详解:作用、问题与优化
前端·vue.js
架构个驾驾3 小时前
Vue2 Router 深度解析与实战指南
前端·javascript·vue.js
尖椒土豆sss3 小时前
vite项目启动后访问报错:Cannot read properties of undefined (read ing getTokens")
前端·vue.js
独立开阀者_FwtCoder3 小时前
JS调试技巧:避免控制台卡死的日志断点使用技巧
前端·javascript·vue.js
Face3 小时前
Vue框架使用SSR
前端·javascript·vue.js
GIS之家4 小时前
vue+cesium示例:地形开挖(附源码下载)
前端·javascript·vue.js·gis·cesium·webgis
工业互联网专业4 小时前
基于Android的一周穿搭APP的设计与实现 _springboot+vue
android·vue.js·spring boot·毕业设计·源码·课程设计·一周穿搭app