a-table:实现跨域多选功能——基础积累

table组件跨页多选功能:
在这里插入图片描述
html部分的代码:

<a-tablesize="small"style="margin-top: 10px"rowKey="id":columns="columns":dataSource="dataSource":pagination="pagination":loading="loading":scroll="{ x: 1000, y: 300 }":row-selection="{selectedRowKeys: selectedRowKeys,onChange: onSelectChange,}"bordered></a-table>

上面的代码中,最重要的就是:

1.rowKey='id'

2.row-selection的写法

 :row-selection="{selectedRowKeys: selectedRowKeys,onChange: onSelectChange,}"

3.script中定义参数

export default {name: 'areaDrawer',components: { schedulingSetForm, outForm },data() {return {selectedRowKeys: [],selectedRows: [],};},
}

4.监听选择change事件

 onSelectChange(selectedRowKeys, selectedRows) {if (this.selectedRowKeys.length < selectedRowKeys.length) {selectedRowKeys.forEach((item, Iindex) => {let index = this.selectedRows.findIndex((s) => s.id == item);if (index == -1) {this.selectedRows.push(selectedRows[selectedRows.length - 1]);}});} else {this.selectedRowKeys.forEach((item, index) => {if (selectedRows.indexOf(item) == -1) {this.selectedRows.splice(index, 1);}});}this.selectedRowKeys = selectedRowKeys;
},

完成!!!多多积累,多多收获!

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

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

相关文章

零基础自学C语言|自定义类型:联合与枚举

✈联合体 &#x1f680;联合体的类型声明 像结构体一样&#xff0c;联合体也是由一个或者多个成员构成&#xff0c;这些成员可以不同的类型。 但是编译器只为最大的成员分配足够的内存空间。联合体的特点是所有成员共用同一块内存空间。所以联合体也叫&#xff1a;共用体。 给…

机试:计算第几天

问题描述: 代码示例: //计算第几天 #include <bits/stdc.h> using namespace std;int main(){cout << "输入样例" << endl; int year;int month;int day; cin >> year >> month >> day;int months1[12] {31,28,31,30,31,30,3…

Java错误:微服务报错Cannot execute request on any known serve

&#x1f414;问题内容 报Cannot execute request on any known server 这个错&#xff1a;连接Eureka服务端地址不对。 &#x1f414;解决方式 检查.yml文件或者.properties文件配置 下划线下划线后面的小写字母等同于去掉下划线大写下划线后面的字母&#xff08;驼峰原则&am…

ATFX:美国2月未季调核心CPI年率录得3.8%,低于前值0.1个百分点

ATFX汇市&#xff1a;据美国劳工部数据&#xff0c;美国2月未季调核心CPI年率&#xff0c;最新值3.8%&#xff0c;前值为3.9%&#xff0c;预期值3.7%&#xff0c;最新值低于前值0.1个百分点&#xff0c;意味着高通胀问题正在逐步缓解&#xff0c;最新值高于预期值&#xff0c;意…

Spring启动“--”设置参数没生效

现象 在idea中启动SpringBoot项目时&#xff0c;使用“--”设置的启动参数没有生效&#xff0c;如修改端口号“--server.port8082” 原因 排查发现是因为在使用SpringApplication.run启动项目时&#xff0c;没有将args参数传入run方法。 修复方案 SpringApplication.run参数中…

自动化运维工具 ---------------Ansible

一、Ansible 发展史及功能 作者&#xff1a;Michael DeHaan&#xff08; Cobbler pxe kikstar 与 Func 作者&#xff09;ansible 的名称来自科幻小说《安德的游戏》中跨越时空的即时通信工具&#xff0c;使用它可以在相距数光年的距离&#xff0c;远程实时控制前线的舰队战斗2…

(Linux学习八)进程下,虚拟文件系统proc

一、进程 foreground fg :前台进程&#xff0c;是在终端中运行的命令&#xff0c;占领终端。 background bg &#xff1a;后台进程:没有控制终端&#xff0c;它不需要终端的交互。看不见&#xff0c;但是在运行 & //后台运行程序 jobs //查看进程 kill %1 //消灭后台进…

51WORLD正式落地中东,助力沙特伙伴与客户数字化升级!

近日&#xff0c;在被誉为中东“数字达沃斯”的LEAP科技展上&#xff0c;51WORLD首次震撼亮相Digital Twin Riyadh2924k㎡ 全要素城市底座、数字地球平台51Earth&#xff0c;向中东及全球科技从业者展现中国企业技术实力与创新能力。此外&#xff0c;以LEAP为起点&#xff0c;5…

Elastic Stack--04--ES中的检索方式、Query DSL

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 1.ES中的检索方式第一种方式GET bank/_search # 检索bank下的所有信息&#xff0c;包括 type 和 docsGET bank/_search?q*&sortaccount_number:asc 第二种方式…

Windows从0到1部署项目

文章目录 1.创建虚拟机2.文件的传输--共享文件夹共享文件夹的访问 3.安装jdk&#xff0c;Tomcat3.1jdk的安装与配置配置环境变量 3.2Tomcat的安装与配置 4.安装mysql数据库5.下载nginx6.虚拟域名 因为Windows项目部署有很多操作都是博主之前做过的了&#xff0c;所及就只放了博…

OpenCASCADE开发指南<四>:OCC 数据类型和句柄

一个软件首先要规定能处理的数据类型&#xff0c; 其次要实现三项最基本的功能——引用管理、内存管理和异常管理。在 OCC 中&#xff0c;这三项功能分别对应基础类中的句柄、内存管理器和异常类。 1 数据类型 在基本概念篇里&#xff0c;已经介绍了 OCC 数据类型的分类&…

Mysql 学习(十七)事务隔离级别和MVCC

前提准备 首先创建一个表&#xff1a; CREATE TABLE hero (number INT,name VARCHAR(100),country varchar(100),PRIMARY KEY (number) ) EngineInnoDB CHARSETutf8;INSERT INTO hero VALUES(1, 刘备, 蜀);事务隔离级别 mysql 是一个 客户端 和 服务器架构的软件&#xff0c…

【数据结构】详解线性表的各个函数接口+OJ习题讲解(画图比写代码更重要!!!)

文章目录 一、线性表二、顺序表1、什么是顺序表2、顺序表的分类 三、动态顺序表的实现1、结构的定义2、顺序表的初始化3、检查容量4、在头部插入数据5、在尾部插入数据6、在指定位置插入数据7、在尾部删除数据8、在头部删除数据9、删除指定位置的数据10、查找数据11、修改指定位…

ThreeJs制作模型图片

这个标题名字可能有歧义&#xff0c;只是不知道如何更好的表达&#xff0c;总之就是将图片的像素转换成3D场景的模型&#xff0c;并设置这个模型的颜色&#xff0c;放到像素点对应的位置从而拼接成一个图片&#xff0c;起因是上文中用js分解了音乐&#xff0c;实现了模型跳动效…

互联网行业的应届大学生,如何制作高水平简历?

雇主通常只会花大约25秒的时间浏览一份简历,因此,拥有一份出色的简历对于找到理想工作至关重要。如果您的简历没有令人印象深刻的特点,那么如何才能在竞争激烈的求职市场中脱颖而出呢? 如果您不知道如何在简历上有效地展示自己,或者觉得简历无论怎么修改都不够突出,那么请…

安装、配置MySQL

安装相关软件 MySQL Server、MySQL Workbench MySQL Server&#xff1a;专门用来提供数据存储和服务的软件 MySQL Workbench&#xff1a;可视化的 MySQL 管理工具 官网安装 https://www.mysql.com/ 官网 MySQL :: Download MySQL Installer 安装包路径 在这里选择版本和和对应…

多图如何导入多个二维码?图片批量导出二维码的技巧

多个图片分别生成对应的二维码怎么做&#xff1f;现在扫码看图片是一种很常用的内容预览方式&#xff0c;有些产品包装也会采用这种方式来展示对应的信息&#xff0c;怎么简单快速的将图片生成二维码&#xff0c;相信有很多的小伙伴都非常的感兴趣。那么小编通过下面这篇文章来…

探索C++中的动态数组:实现自己的Vector容器

&#x1f389;个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名乐于分享在学习道路上收获的大二在校生 &#x1f648;个人主页&#x1f389;&#xff1a;GOTXX &#x1f43c;个人WeChat&#xff1a;ILXOXVJE &#x1f43c;本文由GOTXX原创&#xff0c;首发CSDN&…

echarts line绘制机组开关状态折线图

2024.3.12今天我学习了如何用echarts line实现设备开关状态的效果。 代码如下&#xff1a; option {xAxis: {type: time,},yAxis: {type: value,splitNumber:2,// axisLine: {// show: true,// lineStyle: {// color:#808080// }// },axisLabel:{formatt…

管控员工上网行为(让老板管理更省心更高效)

很多老板都有这样一种顾虑&#xff1a; 员工到底有没有认真工作&#xff0c;工作是不是做到了全身心投入。 为什么会有担心员工工作状态的问题发生&#xff1f; 无疑是员工在上班时间浏览与工作无关的网站、下载私人文件、甚至是泄露公司机密等行为&#xff0c;让老板不放心了…