elementPuls 表格反选实现

真的在网上搜了很多资料发现根本实现不了反选 最下面有示例
然后去看了下官网
发现官网有教你怎么选中某个值的方法 官网中的”多选
官网地址

<template><el-tableref="multipleTableRef":data="tableData"style="width: 100%"@selection-change="handleSelectionChange"><el-table-column type="selection" width="55" /><el-table-column label="Date" width="120"><template #default="scope">{{ scope.row.date }}</template></el-table-column><el-table-column property="name" label="Name" width="120" /><el-table-column property="address" label="Address" /></el-table><div style="margin-top: 20px"><el-button @click="toggleSelection([tableData[1], tableData[2]])">Toggle selection status of second and third rows</el-button><el-button @click="toggleSelection()">Clear selection</el-button></div>
</template><script lang="ts" setup>
import { ref } from 'vue'
import { ElTable } from 'element-plus'interface User {date: stringname: stringaddress: string
}const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
const toggleSelection = (rows?: User[]) => {if (rows) {rows.forEach((row) => {// TODO: improvement typing when refactor table// eslint-disable-next-line @typescript-eslint/ban-ts-comment// @ts-expect-errormultipleTableRef.value!.toggleRowSelection(row, undefined)})} else {multipleTableRef.value!.clearSelection()}
}
const handleSelectionChange = (val: User[]) => {multipleSelection.value = val
}const tableData: User[] = [{date: '2016-05-03',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-04',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-08',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-06',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-07',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},
]
</script>

既然官网有办法选中某个值
那反选是不是简单了 很多
以下是个人代码
第一步 获取已选中的值 和未选中的值

<el-tableref="multipleTableRef":data="tableData"style="width: 100%"绑定切换选中时候的数据@selection-change="handleSelectionChange"></el-table><div @click="invertSelection(state.noCheckList)"style="width: 114rem;height: 35rem;border: 1rem solid #9D9D9D;border-radius: 10rem;font-size: 15rem;color: #5C6170;display: flex;align-items: center;margin: 0 20rem;cursor: pointer;"><img style="height: 15rem;margin: 0 10rem 0 15rem;" src="../../../assets/选择-反向选择@2x.png"alt="" srcset=""><span>反向选择</span></div>
<script setup>
let state = reactive({peopleList:[],//总数据checkList: [],//选中数据数组noCheckList:[],//未选中数据数组
})
// 重要 获取选中未选中数据
const handleSelectionChange = (val) => {console.log(val);state.checkList = valconst notIncludedArray = state.peopleList.filter(item => !val.includes(item));state.noCheckList = notIncludedArray// console.log(notIncludedArray);
}
const multipleTableRef= ref() // 多选table
const invertSelection = (rows) => {// rows  需要选中的数据  直接传进 state.noCheckList 即可multipleTableRef.value.clearSelection()  //需要先全部取消选中  再去选中刚刚未选中的数据即可if (rows) {rows.forEach((row) => {multipleTableRef.value.toggleRowSelection(row, undefined)})} else {multipleTableRef.value.clearSelection()}
}</script>

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

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

相关文章

MySQL 和 SQL Server 中的连表更新 UPDATE JOIN 写法比较

MySQL 和 SQL Server 中的连表更新 UPDATE JOIN 写法比较 一、前言1. MySQL 写法1.1 解释 2. SQL Server 写法2.1 解释 二、总结 一、前言 在关系型数据库管理系统&#xff08;RDBMS&#xff09;中&#xff0c;使用 UPDATE 语句进行表格更新是非常常见的操作。特别是当需要根据…

【C#】visual studio打包winForm(依赖DLL)为安装程序exe

0.简介 IDE&#xff1a;VS2022 平台&#xff1a;C# .NetFramework4.7 WinForm界面 有GDAL、EEplus库的依赖&#xff0c;所以在其他未安装环境的电脑中功能无法使用。 1. 安装 1.1 运行文件 在VS扩展中选择管理扩展&#xff0c;Microsoft Visual Studio Installer Projects …

如何合规与安全地利用专业爬虫工具,构建企业数据竞争优势

摘要&#xff1a; 本文深入探讨了在当今大数据时代&#xff0c;企业如何通过合规且安全的方式运用专业爬虫工具&#xff0c;有效收集并分析海量信息&#xff0c;进而转化为企业独有的数据优势。我们不仅会介绍最佳实践&#xff0c;还会讨论关键技术和策略&#xff0c;帮助企业…

java实现迭代(在大数据量时要比递归效率更高)

在项目中有个需求&#xff1a;查找指定机构下所有的子机构&#xff0c;之前使用的递归方式&#xff0c;效率相差很多 比如之前写的一个递归的方法&#xff1a;https://blog.csdn.net/qq_33651286/article/details/140539728 在Java中&#xff0c;递归和迭代是两种常用的算法实…

JavaScript 迭代器

在JavaScript中&#xff0c;迭代器是一种允许我们遍历集合中元素的对象。迭代器对象具有一个next()方法&#xff0c;该方法返回value和done。value是当前迭代的值&#xff0c;done属性是一个布尔值&#xff0c;表示是否到达了集合的末尾。 迭代器协议 一个迭代器对象必须具备以…

【网络】计算机网络基础——计算机网络背景和发展、认识网络协议、OSI七层模型、TCP/IP四层模型、网络的传输

文章目录 Linux网络1. 计算机网络背景和发展2. 认识网络协议3. OSI七层模型3.1 物理层3.2 数据链路层3.3 网络层3.4 传输层3.5 会话层3.6 表示层3.7 应用层 4. TCP/IP四层模型5. 网络的传输 Linux网络 1. 计算机网络背景和发展 开始的计算机都是独立模式&#xff08;计算机之间…

谷歌新的网站索引策略:将来可能不再为您的网站编制索引

10 年前&#xff0c;在 WordPress 上推出新博客的同时&#xff0c;Google 上的内容几乎是即时索引。 搜索引擎试图尽快向用户提供所有信息&#xff0c;这对内容创作者也有利。 然而&#xff0c;随着时间的推移&#xff0c;情况发生了变化&#xff0c;现在谷歌在索引方面变得极…

网络安全之信息收集阶段攻击和防护手段(一)

一、信息收集 前言&#xff1a;社工钓鱼往往是攻击者最喜欢的方式&#xff0c;攻击者一般会伪装成求职者、修改邮箱名称伪造办公邮件&#xff0c;诱导意识薄弱的员工进行下载恶意文件或恶意链接&#xff0c;链接往往会通过名称遮掩真实的IP地址。 攻击方&#xff1a;攻击者通…

Maven打包时将本地 jar 加入 classpath

在使用 maven 编译项目时&#xff0c;我们有时候会需要引入本地的 jar 包作为依赖&#xff08;不部署到本地仓库&#xff09;&#xff0c;一般会使用 scope 为 system 的标签来引入&#xff0c;如下所示&#xff1a; <dependency><groupId>com.example</groupI…

【解决】ubuntu20.04 root用户无法SSH登陆问题

Ubuntu root用户无法登录的问题通常可以通过修改‌SSH配置文件和系统登录配置来解决。 修改SSH配置文件 sudo vim /etc/ssh/sshd_config 找到 PermitRootLogin 设置&#xff0c;并将其值更改为 yes 以允许root用户通过SSH登录 保存并关闭文件之后&#xff0c;需要重启SSH服务…

用uniapp 及socket.io做一个简单聊天app 2

在这里只有群聊&#xff0c;二个好友聊天&#xff0c;可以认为是建了一个二人的群聊。 const express require(express); const http require(http); const socketIo require(socket.io); const cors require(cors); // 引入 cors 中间件const app express(); const serv…

6 Go语言的常量、枚举、作用域

本专栏将从基础开始&#xff0c;循序渐进&#xff0c;由浅入深讲解Go语言&#xff0c;希望大家都能够从中有所收获&#xff0c;也请大家多多支持。 查看相关资料与知识库 专栏地址:Go专栏 如果文章知识点有错误的地方&#xff0c;请指正&#xff01;大家一起学习&#xff0c;…

【Python】主字符串中查找子字符串:滑动窗口、正则表达式、递归检查

一、题目 In this challenge, the user enters a stirng and a substring. You have to print the number of times that the substring occurs in the given string. String traversal will tack place from left to right, not from right to lef. NOTE: String letters ar…

Leetcode—426. 将二叉搜索树转化为排序的双向链表【中等】Plus

2024每日刷题&#xff08;148&#xff09; Leetcode—426. 将二叉搜索树转化为排序的双向链表 实现代码 /* // Definition for a Node. class Node { public:int val;Node* left;Node* right;Node() {}Node(int _val) {val _val;left NULL;right NULL;}Node(int _val, Nod…

R包:plot1cell单细胞可视化包

介绍 plot1cell是用于单细胞数据seurat数据对象的可视化包。 安装 ## You might need to install the dependencies below if they are not available in your R library. bioc.packages <- c("biomaRt","GenomeInfoDb","EnsDb.Hsapiens.v86&qu…

无人机之起飞前准备

一、检查无人机状态 1、确保无人机的电池充满电或有足够的电量&#xff1b; 2、检查螺旋桨是否安装牢固&#xff0c;没有损坏&#xff1b; 3、确认无人机的固件是最新版本&#xff0c;以保证拥有最新的功能和修正。 二、选择合适的起飞地点 1、避免在人群密集或有障碍物的…

深入理解 Java17 新特性:Sealed Classes

0 关键总结 Java SE 15在2020年9月发布&#xff0c;预览功能引入“封闭类”(JEP 360)封闭类是一种限制哪些其他类或接口可扩展它的类或接口类似枚举&#xff0c;封闭类在领域模型中捕获替代方案&#xff0c;允许程序员和编译器推理其穷尽性封闭类对于创建安全的层次结构也很有…

iOS 创建一个私有的 CocoaPods 库

创建一个私有的 CocoaPods 库&#xff08;pod&#xff09;涉及几个步骤&#xff0c;包括设置私有的 Git 仓库、创建 Podspec 文件、发布到私有仓库等等。以下是详细步骤&#xff1a; 设置私有 Git 仓库 首先&#xff0c;在 GitHub、GitLab 或 Bitbucket 上创建一个新的私有仓库…

身份证如何查验真伪?C#身份证二要素、三要素接口集成

身份证不仅是我们的身份证明&#xff0c;更是社会生活中的“通行证”&#xff0c;现在人们的衣食住行都离不开身份证。但对于提供服务的平台而言&#xff0c;如何对用户提供的身份信息进行真伪核验便成为了一大难题。别担心&#xff0c;今天小编为服务平台带来了身份证二要素、…

MySQL:增删改查、临时表、授权相关示例

目录 概念 数据完整性 主键 数据类型 精确数字 近似数字 字符串 二进制字符串 日期和时间 MySQL常用语句示例 SQL结构化查询语言 显示所有数据库 显示所有表 查看指定表的结构 查询指定表的所有列 创建一个数据库 创建表和列 插入数据记录 查询数据记录 修…