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 小时前
第一章:为什么你要学 AI Agent?—— 从"切图仔"到全栈的进化之路
前端·javascript·vue.js
pany12 小时前
做 AI 友好的开源 Vue3 模板 🌈
前端·vue.js·ai编程
daols8813 小时前
vue 甘特图 vxe-gantt 小时视图设置日期轴每间隔 3 个小时
vue.js·甘特图·vxe-gantt
你挚爱的强哥17 小时前
Vue2 实现 1.5s 十连击监听(连续点击若干次),封装通用可复用点击检测工具,不用 data!Vue 封装通用连击监听方法,支持自定义时长与点击次数
前端·javascript·vue.js
卓怡学长19 小时前
w266基于spring boot + vue 圣地延安美食乐享系统
java·数据库·vue.js·spring boot·spring·intellij-idea
我有满天星辰19 小时前
Vue项目脚手架之争:create-vue与Vue CLI全面对比
前端·javascript·vue.js
Random_index21 小时前
#Vue3篇: Vue 项目发版后如何提示用户刷新?基于 package.json 版本号的前端更新检测方案
前端·vue.js·json
我有满天星辰1 天前
Vue 2 与 Vue 3 计算属性完全指南:从 Options API 到组合式 API 的演进
前端·javascript·vue.js
用户83134859306981 天前
Cesium自定义可调节星空夜景+星星闪烁
vue.js·cesium
白露与泡影1 天前
用 Spring Boot + Vue + Fuzio 构建现代 Java 桌面应用
java·vue.js·spring boot