antd rowSelection 分页等切换保留勾选

简介: antd rowSelection 分页等切换保留勾选

看了网上很多实现,感觉都挺复杂的,所以写下我10行左右代码的实现方案:

思路也很简单,就是让选中项与state绑定,在全选\勾选的时候改变state.select_data的值就行了,

下面是代码:用setState实现的,如果需要用hooks实现也是同理

this.state={select_data:[]}
render(){
let _data = this.state.select_data.slice()
const rowSelection = {
      selectedRowKeys: this.state.select_data,
      onSelect: (record, selected) => {
        _data  = selected ? _data .concat([record.id]) : _data .filter(item => item !== record.id)
        this.setState({ select_data: _data  });
      },
      onSelectAll: (selected, selectedRows, changeRows) => {
        const _ids = changeRows.map(item => item.id)
        _data = selected ? _data .concat(_ids) : _data.filter(item => !_ids.includes(item))
        this.setState({ select_data: _data});
      }
    };
    }

我猜测其他大佬写的复杂的可能是:直接改变state.select_data或类似:


let _data=this.state.select_data//引用select_data,并未改变它的内存地址


这样的赋值,发现并没有变化。实际上也是很简单的原因,当state的是数组或者json的时候,通过上面的方法进行赋值,并未改变它的内存地址,所以不会触发更新。需要解构或深拷贝出来,再进行赋值即可

目录
相关文章
|
JavaScript
Ant designe vue中有关<a-list>组件中 实现分页以及复选框效果
Ant designe vue中有关<a-list>组件中 实现分页以及复选框效果
738 0
|
前端开发 Java 开发者
React 之如何调试源码
React 源码如何调试,想必大家在阅读源码的时候一定会遇到,所以本篇我们来讲讲如何进行源码调试。
542 0
|
人工智能 达摩院 自然语言处理
超好用的开源模型平台,ModelScope阿里达摩院
超好用的开源模型平台,ModelScope阿里达摩院
1109 1
并发和并行以及他们的区别
并发:         并发指的是多个任务交替执行的能力,这些任务可能不是同时执行,而是通过快速切换在不同任务之间来实现“同时执行”的效果。在多核处理器上,多个线程可以真正同时执行,而在单核处理器上,线程之间通过时间片轮转实现并发。         所以当谈论并发的时候一定要加个单位时间,也就是说单位时间内并发量是多少?离开了单位时间其实是没有意义的。 并行:         并行指的是多个任务同时执行的能力,每个任务都在独立的CPU上执行。并行通常用于同时处理独立任务,这些任务可以同时执行,而不需要相互等待或协同工作。 两者区别:         关键区别在于并发强调任务在时间上交替执行
316 0
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
9587 1
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
Rust 前端开发 关系型数据库
Tauri 开发实践 — Tauri 集成本地数据库
本文介绍了在 Tauri 框架中集成本地数据库的几种方案,包括直接绑定 SQLite、使用第三方数据库库和使用 tauri-plugin-sql-api 插件。最终选择了 tauri-plugin-sql-api,因为它集成简单、支持多种数据库类型,并且与 Tauri 框架深度整合,提升了开发效率和安全性。文章详细介绍了如何安装和使用该插件,以及如何编写核心代码实现数据库操作。
926 2
|
9月前
|
人工智能 DataWorks 大数据
大数据AI一体化开发再加速:DataWorks 支持GPU类型资源
大数据开发治理平台 DataWorks 的Serverless资源组支持GPU资源类型,以免运维、按需付费、弹性伸缩的Serverless架构,将大数据处理与AI开发能力无缝融合。面向大数据&AI协同开发场景,DataWorks提供了交互式开发和分析工具Notebook。开发者在创建个人开发环境时,可以选择GPU类型的资源作为Notebook运行环境,以支持进行高性能的计算工作。本教程将基于开源多模态大模型Qwen2-VL-2B-Instruct,介绍如何使用 DataWorks Notebook及LLaMA Factory训练框架完成文旅领域大模型的构建。
559 24
|
前端开发 UED
React 防抖与节流用法
React 防抖与节流用法
349 0
|
JavaScript
Vue2.0、Vue3.0分别使用v-model封装组件[Vue必会]
本文介绍了在Vue 2和Vue 3中如何使用`v-model`来实现组件间的双向数据绑定,包括在Vue 2中使用`value`和`input`事件,以及在Vue 3中使用`modelValue`和`update:modelValue`事件的方法。
870 22
下一篇
开通oss服务