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.hqwc.cn/news/535540.html

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

相关文章

能发顶会!GNN结合LLMs的三大创新思路!新SOTA准确率提升10倍

LLMs在处理NLP任务方面表现出色&#xff0c;而GNNs在挖掘和分析复杂关系数据&#xff08;图数据&#xff09;方面展现出其卓越的能力。这种趋势催生了将这两种技术整合的研究兴趣&#xff0c;为解决更多领域的实际问题。GNN结合LLMs也逐渐成为了研究的热点。 GNNLLMs可以发挥二…

【SQL Server安装绊脚石】排除报错的终极指南

&#x1f6a9;本文介绍 ​ 在迈向数据库管理系统的世界时&#xff0c;SQL server的安装过程往往是我们踌躇的绊脚石。一不小心&#xff0c;就可能陷入各种报错的困境中。然而&#xff0c;正是这些挑战&#xff0c;让我们更加升入地了解SQL server地安装与配置&#xff0c;也让…

【Redis学习_介绍与安装】

Redis学习_介绍与安装 Redis学习_介绍与安装Redis介绍Redis安装命令介绍问题集 Redis学习_介绍与安装 Redis介绍 Redis 是一种开源的高性能、非关系型、基于键值对的数据存储系统&#xff0c;也被称为数据结构服务器。Redis 数据库支持多种数据结构&#xff0c;如字符串&…

展会邀约 | 加速科技将携重磅产品亮相SEMICON China 2024

SEMICON China 2024将于3月20日-3月22日在上海新国际博览中心隆重举行。展会期间&#xff0c;加速科技将携重磅产品高性能数模混合信号测试机ST2500EX、LCD Driver测试机Flex10K-L、高密度数模混合信号测试系统ST2500E、高性能数模混合信号测试系统ST2500A亮相此次行业盛会&…

打破信息获取的界限:灵雀云推出自主研发智能文档机器人KnowledGenie

自LLM&#xff08;Large Language Model&#xff09;技术的迅速崭露头角以来&#xff0c;整个AI领域已经发生了翻天覆地的变化。LLM技术的不断进步&#xff0c;特别是以ChatGPT为代表的技术&#xff0c;为人工智能领域带来了前所未有的发展机遇。这种技术的出现&#xff0c;使得…

掌握这些技巧,打造高效的考试培训系统

掌握一些有效的技巧&#xff0c;可以帮助我们打造一个高效的考试培训系统。考试培训对于学生来说非常重要&#xff0c;它可以帮助他们提高分数&#xff0c;并增强他们的学习能力。 一个高效的考试培训系统应该提供多种学习方式。每个学生的学习风格都不同&#xff0c;因此应该提…

工作中常用的git命令

git 分布式版本控制系统。 使用远程仓库时候会有多个协议可以选择&#xff0c;使用https不仅仅速度慢&#xff0c;而且每次push都要输入口令。 HEAD 当前版本的指针&#xff0c;当切换本地版本的时候会快速指向指定版本文件 master git为我们创建主分支 origin 远程仓库的名…

位图、布隆过滤器

普通的哈希表增删查改的效率的确达到了令人满意的O&#xff08;1&#xff09;&#xff0c;但是本质还是以空间换时间来实现的。并且哈希表中是直接存储数据的&#xff0c;应对一些海量数据处理的问题可能就会造成空间不足的问题。 加入现有40亿个无符号整形数字&#xff0c;设…

理论学习 BatchNorm2d

import torch import torch.nn as nn# With Learnable Parameters m nn.BatchNorm2d(100) # Without Learnable Parameters m nn.BatchNorm2d(100, affineFalse) input torch.randn(20, 100, 35, 45) output m(input)print(output) print(output.shape)这段代码展示了如何使…

深度学习--离线数据增强

最近做项目遇见数据集背景非常单一&#xff0c;为了增加模型的返回能里&#xff0c;只能自己做一些数据增强来增加背景的多样性。代码如下&#xff1a; import numpy as np import cv2def create_mask(box, height, width):"""创建一个全零的掩码图像&#xff…

第14届环境与农业工程国际会议(ICEAE 2024)即将召开!

2024年第14届环境与农业工程国际会议&#xff08;ICEAE 2024&#xff09;将于6月7日至9日在泰国曼谷召开。本次会议旨在促进环境与农业工程的研究和开发活动&#xff0c;共同探讨领域内最新以及具有根本性的进展突破。热忱欢迎从事相关领域研究的专家&#xff0c;学者和专业技术…

深入解析C++树形关联式容器:map、set及其衍生容器的使用与原理

文章目录 一、引言二、关联式容器的中的 paira.pair 的创建及使用b.pair 间的比较 三、 map 与 set 详解1. map 的基本操作2. set 的基本操作3.关联式容器的迭代器 四、 multimap 与 multiset 的特性五、关联式容器的使用技巧与注意事项1. 键值类型的选择与设计2. 自定义比较函…