Ant Design Vue - table实现跨页选择

news2024/10/3 6:38:20
实现下图跨页选择效果
:rowSelection="{ onSelect: onSelect, onSelectAll: onSelectAll, selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"

 

onSelectChange(selectedRowKeys, selectionRows) {
  console.log('select', this.selectedRowKeys, this.selectedRowKeys)
  this.selectedRowKeys = selectedRowKeys
  // this.selectionRows = selectionRows  //不用onchange操作
},
onSelect(record, selected, selectionRows, nativeEvent) {
  // console.log(record)
  // console.log(selectionRows)
  // console.log(this.selectionRows)
  if (selected) {
    this.selectionRows.push(record)
    // console.log(this.selectionRows)
  }else{
    const delIndex = this.selectionRows.findIndex((val) => {
      return val.id === record.id
    })
    this.selectionRows.splice(delIndex, 1)
  }
},
onSelectAll(selected, selectionRows, changeRows) {
  if (selected) {
    this.selectionRows = this.selectionRows.concat(changeRows)
  }
  if (!selected) {
    let selectionRows = JSON.parse(JSON.stringify(this.selectionRows))
    const delIndex = []
    selectionRows.forEach((item, index) => {
      changeRows.forEach((val, itemIndex) => {
        if (item.id === val.id) {
          delIndex.push(index)
        }
      })
    })
    delIndex.forEach((item) => {
      delete selectionRows[item]
    })
    selectionRows = selectionRows.filter((item) => {
      return item !== undefined
    })
    this.selectionRows = selectionRows
  }
},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/686213.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ActiveMQ消息队列主从集群

文章目录 1.ActiveMQ消息队列主从集群模式1.1.主从集群架构1.2.环境规划 2.部署ActiveMQ主从高可用集群2.1.部署Zookeeper集群2.1.1.搭建Zookeeper三节点2.1.2.配置Zookeeper三节点2.1.3.配置Zookeeper各个节点的myid2.1.4.启动Zookeeper集群 2.2.部署ActiveMQ主从集群2.2.1.部…

解决90%面试问题!GitHub顶级“Java面试手册“了解下八股文天花板

前言 身为java开发工程师的你找到自己满意的工作了吗?又或者还在面试的路上经历一次又一次的失败。迟迟找不到正确的开门砖,也许你的技术能力可能并不差但就是在面试上得不到充分的证明。 而那些成功拿下自己满意的开发工作的人又是怎样做到的呢?我这一路走来也有…

2023下半年杭州/广州/深圳软考(中/高级)认证,进入备考

软考是全国计算机技术与软件专业技术资格(水平)考试(简称软考)项目,是由国家人力资源和社会保障部、工业和信息化部共同组织的国家级考试,既属于国家职业资格考试,又是职称资格考试。 系统集成…

Svg基本使用

1.说明 双闭合标签&#xff0c;默认宽度和高度300*150 svg绘制图形务必在svg标签内使用 ,可以通过样式设置宽高 svg与canvas区别就是它并不是图片 2.绘制直线 2.1代码展示 <linex1"100"y1"100"x2"500"y2"100"stroke"pink…

网络安全行业,面对供大于求的现状是怎么样的呢?

一、网络安全行业市场发展情况 网络时代生活越来越离不开网络&#xff0c;与此同时发生的网络安全攻击事件、非法入侵等等一系列事件都威胁着普通人的生活。没有网络安全保障&#xff0c;个人和企业等重要领域都暴露在风险之中。 二、网络安全行业人才发展需求 网络安全行业至…

【算法题】剪绳子、计算二进制中1的个数、数值的整数次方

剪绳子、计算二进制中1的个数、数值的整数次方 一、剪绳子1.1、题目描述1.2、思路1.3、代码实现&#xff1a;1.4、华丽的快速幂取余1.5、小结 二、数值的整数次方2.1、题目描述2.2、思路2.3、代码实现2.4、小结 三、计算二进制中1的个数3.1、题目描述3.2、思路3.3、代码实现3.4…

Kafka最基础使用

一、概念 2、应用场景 异步处理系统解耦流量削峰日志处理 3、消息队列的两种模式 点对点模式 消息发送者生产消息发送到消息队列中&#xff0c;然后消息接收者从消息队列中取出并且消费消息。消息被消费以后&#xff0c;消息队列中不再有存储&#xff0c;所以消息接收者不可…

(一)CSharp-网络编程

一、OSI 参考模型 &#xff08;1&#xff09;物理层 作为原始的位流或电气处理。 &#xff08;2&#xff09;数据链路层 负责建立、维持和释放数据链路的连接。 &#xff08;3&#xff09;网络层 选择合适的网间路由和交换结点&#xff0c;以确保数据及时传送。网络层将数据…

Flutter性能优化的一些路径思考

不可否认 Flutter 是一个非常强大的移动应用开发框架&#xff0c;我们在技术架构选型时就是选用的 Flutter&#xff0c;特别是跨端能力属实很优秀&#xff0c;but 也逐渐发现在复杂的应用程序实现中&#xff0c;App 的性能会受到一些影响。 其实这个问题&#xff0c;我们内部…

如何用Dialog DA1468X DK PRO测试其他板子的电流

2021.09.27 Jim 目录 工具准备... 1 PC上位机安装... 1 打开PC上位机... 1 消除DA1468X开发板本身底电流... 2 测试待测板子的功耗... 3 电压调节... 4 跳线帽... 6 工具准备 DA1468X DK PRO开发板一套&#xff0c;不需要装顶板的小板子&#xff0c;只需要母板&#…

「缤纷色彩的饼状图」:通过使用matplotlib库绘制饼状图,让读者期待在这个色彩缤纷的图表中探索数据的美丽。

嘿&#xff0c;大家好&#xff01;今天我要带你们探索一个有趣的话题&#xff1a;使用matplotlib库绘制饼状图。虽然这听起来可能有些复杂&#xff0c;但我会用轻松幽默的语言给大家讲解&#xff01;准备好了吗&#xff1f;让我们开始吧&#xff01; 首先&#xff0c;我们需要导…

人工智能的奥秘:机器学习的各大门派

本篇文章是博主在人工智能等领域学习时&#xff0c;用于个人学习、研究或者欣赏使用&#xff0c;并基于博主对人工智能等领域的一些理解而记录的学习摘录和笔记&#xff0c;若有不当和侵权之处&#xff0c;指出后将会立即改正&#xff0c;还望谅解。 文章分类在学习摘录和笔记专…

2023网络安全 -- 正向连接与反向连接

一、正向连接&#xff0c;Linux服务器主动控制windows服务器 1、上传nc到windows服务器上运行 2、以管理员身份运行cmd 3、执行下面命令&#xff0c;监听任意来自8899端口的数据&#xff0c;等待服务器来连接 nc -e cmd -lvvp 8899 4、Linux服务器执行如下命令&#xff0c;i…

解决USB设备PC不识别问题思路(亲测方案)

前言&#xff1a; 因环境是集控封锁USB端口的&#xff0c;所以刚碰到用户出现此问题&#xff0c;一般都认为是策略封堵拒绝了&#xff0c;但经过后面测试及权限查看是没问题的&#xff0c;所以深究一看&#xff0c;完全是USB设备都没有被PC主机识别的问题。按常规我们一般碰到这…

渗透怎么学?渗透测试中超全的提权思路来了!

提权Webshell&#xff1a;尽量能够获取webshell&#xff0c;如果获取不到webshell可以在有文件上传的地方上传反弹shell脚本&#xff1b;或者利用漏洞&#xff08;系统漏洞&#xff0c;服务器漏洞&#xff0c;第三方软件漏洞&#xff0c;数据库漏洞&#xff09;来获取shell。 …

webpack3 打包vue项目导致app体积过大

问题说明&#xff1a;打包导致 js 很大&#xff0c;然后访问特别慢。 Q&#xff1a;如果你的 js 达到了好几M&#xff0c;&#xff08;除了个别情况&#xff0c;比如的代码量真的超级大到不行&#xff0c;其实这个本身就不成立&#xff09;。我最开始就是&#xff0c;打包了我…

CSDN个性化推荐系统-负反馈测试

文章目录 前言一、uc不感兴趣标签过滤测试1.uc不感兴趣标签获取(uc_unlike_tag_list)1.1个人中心界面1.2从标签中可以发现什么&#xff1f;1.3与研发确认点1.4设计开发1.5接口获取结果 2.推荐流文章标签获取(tag_list)2.1部分代码2.2基本标签校验2.3基本标签校验结果 3.推荐流u…

Linux——DNS域名解析服务

个人简介&#xff1a;云计算网络运维专业人员&#xff0c;了解运维知识&#xff0c;掌握TCP/IP协议&#xff0c;每天分享网络运维知识与技能。座右铭&#xff1a;海不辞水&#xff0c;故能成其大&#xff1b;山不辞石&#xff0c;故能成其高。 个人主页&#xff1a;小李会科技的…

【③MySQL 数据查询】:提高查询的效率

前言 ✨欢迎来到小K的MySQL专栏&#xff0c;本节将为大家带来MySQL数据查询的讲解&#xff08;基本、分组、排序、聚合、分页、条件查询&#xff09; 目录 前言一、基本查询二、条件查询三、聚合函数(统计函数)四、分组查询五、排序查询五、分页查询六、总结 一、基本查询 MySQ…

海格里斯HEGERLS仓储设备高端定制|四向穿梭车立体库仓储的重要设备换层提升机

随着科技的快速发展&#xff0c;仓储物流行业已慢慢的朝着无人化、自动化和智能化方向快速发展&#xff0c;用户的需求量也随之日益提升。自动化立体库早已成为很多企业智能仓的标配&#xff0c;可以实现仓库高层合理化、存取自动化、操作简便化。在立体仓库内&#xff0c;高位…