当前位置: 首页 > news >正文

Element UI实现表格全选、半选

制作如图所示的表格全选、半选:

父组件

<template><div id="app"><SelectHost :hostArray="hostArray" /></div>
</template><script>
import SelectHost from './components/SelectHost.vue'
export default {name: 'App',components: {SelectHost},data() {return {hostArray: [{"uuid": "bdd6565dfef7424885e48b655134b856","ip": "30.184.21.55","port": "80","priority": "0","status": "Running","vmName": "CQB-L0703002","vmType": "ECS","weight": "10"},{"uuid": "493e1c76bbd4457aa74a9066f0eb1fa3","ip": "30.184.8.7","port": "80","priority": "0","status": "Running","vmName": "CQB-L0615064","vmType": "ECS","weight": "10"},{"uuid": "6f98e7fa0ec94ca7923afc11660ea642","ip": "30.98.188.157","port": "80","priority": "0","status": "Running","vmName": "SZE-L0812244","vmType": "ECS","weight": "1"}]}},
}
</script><style lang="scss">
#app {padding: 20px;
}
</style>

子组件:自己手搓

<template><div style="position: relative"><!-- 全选 or 取消全选 --><div class="header-checkbox"><el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAll" /></div><el-table :data="hostArray" border><el-table-column width="44" align="center" class-name="row-uuid"><template slot-scope="scope"><el-checkbox-group v-model="checkList" @change="handleCheckRow"><el-checkbox :label="scope.row.uuid" /></el-checkbox-group></template></el-table-column><el-table-column label="主机名" prop="vmName" align="center" /><el-table-column label="主机IP" prop="ip" align="center" /><el-table-column label="状态" prop="status" align="center" /><el-table-column label="主机类型" prop="vmType" align="center" /><el-table-column label="后端端口" prop="port" align="center" /><el-table-column label="权重" prop="weight" align="center" /><el-table-column label="优先级" prop="priority" align="center" /></el-table></div>
</template><script>
export default {name: 'SelectHost',props: {hostArray: {type: Array,default: []}},data() {return {isIndeterminate: false,  // 设置半选的样式checkAll: false,  // 全选、取消全选的状态checkList: [],  // 单元行的选择状态}},methods: {// 全选、取消全选handleCheckAll(val) {this.checkList = val ? this.hostArray.map(item => item.uuid) : []this.isIndeterminate = false},// 单元行的选择handleCheckRow(value) {const checkedCount = value.lengththis.checkAll = checkedCount === this.hostArray.lengththis.isIndeterminate = checkedCount > 0 && checkedCount < this.hostArray.length}},
}
</script><style lang="scss" scoped>
::v-deep .row-uuid .el-checkbox__label {display: none;
}
.header-checkbox {width: 20px;height: 20px;position: absolute;left: 15px;top: 10px;
}
</style>

子组件:Element UI封装好的

<template><div><el-tableref="multipleTable":data="hostArray"border@selection-change="handleSelectionChange"><el-table-columntype="selection"width="44"></el-table-column><el-table-column label="主机名" prop="vmName" align="center" /><el-table-column label="主机IP" prop="ip" align="center" /><el-table-column label="状态" prop="status" align="center" /><el-table-column label="主机类型" prop="vmType" align="center" /><el-table-column label="后端端口" prop="port" align="center" /><el-table-column label="权重" prop="weight" align="center" /><el-table-column label="优先级" prop="priority" align="center" /></el-table><div style="margin-top: 20px"><el-button @click="toggleSelection([hostArray[1], hostArray[2]])">切换第二、第三行的选中状态</el-button><el-button @click="toggleSelection()">取消选择</el-button></div></div>
</template><script>
export default {name: 'SelectHost',props: {hostArray: {type: Array,default: []}},data() {return {multipleSelection: []}},methods: {toggleSelection(rows) {if (rows) {rows.forEach(row => {this.$refs.multipleTable.toggleRowSelection(row)})} else {this.$refs.multipleTable.clearSelection()}},handleSelectionChange(val) {this.multipleSelection = val}},
}
</script><style lang="scss" scoped>
</style>

相关文章:

Element UI实现表格全选、半选

制作如图所示的表格全选、半选&#xff1a; 父组件 <template><div id"app"><SelectHost :hostArray"hostArray" /></div> </template><script> import SelectHost from ./components/SelectHost.vue export default…...

Dify实现自然语言生成SQL并执行

目录 一、需求分析 二、解决思路 问题1&#xff1a;文字描述生成SQL语句 问题2&#xff1a;执行生成的SQL语句 完整解决方案 三、最终效果展示 四、具体实现 1.Agent提示词 2.知识库数据 3.sql执行器工作流创建 3.1 节点1 3.2 节点2 3.3 节点3 3.4 最终配置界面预…...

【leetcode hot 100 347】前 K 个高频元素

解法一&#xff1a;用map的value记录key出现的次数&#xff0c;用PriorityQueue构造最小堆。 class Solution {public int[] topKFrequent(int[] nums, int k) {// 把元素放在map中Map<Integer,Integer> map new HashMap<>();for(int num:nums){if(map.containsK…...

golang不使用锁的情况下,对slice执行并发写操作,是否会有并发问题呢?

背景 并发问题最简单的解决方案加个锁,但是,加锁就会有资源争用,提高并发能力其中的一个优化方向就是减少锁的使用。 我在之前的这篇文章《开启多个协程,并行对struct中的每个元素操作,是否会引起并发问题?》中讨论过多协程场景下struct的并发问题。 Go语言中的slice在…...

一文了解Gradle 依赖管理(五)- 依赖管理缓存依赖

文章目录 1. 版本目录 (Version Catalogs)1. 版本目录的概念与优势2. 主要优势3. 基本配置4. 使用版本目录5.使用外部版本目录文件6.实际项目中的版本目录最佳实践 2. 依赖锁定&#xff08;Dependency Locking&#xff09;1. 依赖锁定的概念与重要性2. 主要优势3. 如何启用依赖…...

如何在 Postman 中发送 PUT 请求?

在 Postman 中发送 PUT 请求的步骤相对简单&#xff0c;包括新建接口、选择 PUT 方法、填写 URL 和参数等几个主要步骤。 Postman 发送 put 请求教程...

Ubuntu20.04.6系统根目录扩容

文章目录 方法一&#xff1a;**1. 检查磁盘和分区情况****2. 扩展 vda3 分区****3. 扩展 LVM 物理卷****4. 扩展 LVM 逻辑卷****5. 扩展文件系统** 方法二:1. 查看当前磁盘分区情况2. 创建新分区3. 重新加载分区表4. 扩展物理卷&#xff08;PV&#xff09;5. 扩展逻辑卷&#x…...

《AI赋能SQL Server,数据处理“狂飙”之路》

在数字化浪潮汹涌的当下&#xff0c;企业的数据量犹如滚雪球般飞速增长。据统计&#xff0c;过去几年全球数据量的年增长率高达30%以上 &#xff0c;海量数据如同双刃剑&#xff0c;既蕴含着无限商机&#xff0c;也给数据处理带来巨大挑战。SQL Server作为一款强大的关系型数据…...

c++ 日志框架G3log介绍及在嵌入式Linux上的移植(交叉编译)

在开发高性能的C应用程序时&#xff0c;一个高效的日志框架是不可或缺的。G3log是一个开源的日志库&#xff0c;以其高性能和易于使用著称&#xff0c;特别适用于嵌入式Linux环境。本文将详细介绍G3log的主要特性和如何在嵌入式Linux平台上进行交叉编译。 G3log介绍 G3log 是一…...

Buffer overFolw---Kryo序列化出现缓冲区溢出的问题解决

问题&#xff1a; 由于我的数据量太大&#xff0c;我设置批次为10000万&#xff0c;50w数据大概有400M左右&#xff0c;然后进行spark数据处理时候报错为org.apache.spark.SparkException:Kryo serialization failed:Buffer overFolw.Available:0,rquired 58900977,To …...

leetcode日常刷题

题目&#xff1a;K个一组翻转链表 思路 题目要求k个一组进行反转&#xff0c;首先考虑到如果k为1&#xff0c;那就可以直接返回链表头&#xff0c;这种情况没必要翻转。 如果只有一个节点或者head为空结点&#xff0c;直接返回head即可&#xff08;一个节点翻转k次都是本身&am…...

菜鸡前端计算机强基计划之CS50 第七课 python 入门—— Python 中yield专题学习

菜鸡前端计算机强基计划之CS50 第七课 python 入门—— Python 中yield专题学习 1. 什么是 yield&#xff1f;直观感受 2. 生成器是什么&#xff1f;一个简单的例子 3. yield 的工作原理&#xff08;图形化解释&#xff09;4. yield 和内存的魔法用列表返回所有值用生成器逐步生…...

密码学——知识问答

目录 1、阐述公开密钥算法的定义&#xff0c;结合RSA算法说明公钥密码的基本要求。 说明公钥与私钥两种密码学并举例与其应用 1. 公钥密码学&#xff08;非对称加密&#xff09;&#xff1a; 2. 私钥密码学&#xff08;对称加密&#xff09;&#xff1a; 对比公钥与私钥密码…...

Talos-docker版本中创建 Kubernetes 集群

在talos容器化版本中部署Kubernetes集群&#xff0c;用于折腾学习。 1.系统信息 虚拟机软件&#xff1a;VMware Worktation 虚拟机配置&#xff1a;4G内存 4vCPU 200GB磁盘 操作系统&#xff1a;CentOS7.9 docker&#xff1a;20.10.15 PS&#xff1a;为啥VMware Worktat…...

【Excel使用技巧】某列保留固定字段或内容

目录 ✅ 方法一&#xff1a;使用 Excel 公式提取 body 部分 &#x1f50d; 解释&#xff1a; ✅ 方法二&#xff1a;批量处理整列数据 &#x1f6a8; 注意事项 &#x1f6a8; 处理效果 我想保留Excel某一列的固定内容&#xff0c;比如原内容是&#xff1a; thread entry i…...

matlab 模拟 闪烁体探测器全能峰

clc;clear;close all %% 参数设置 num_events 1e5; % 模拟事件数 E 662e3; % γ射线能量&#xff08;eV&#xff09; Y 38000; % 光产额&#xff08;photon/MeV&#xff0c;NaI(Tl)&#xff09; eta 0.2; % 量子效率 G 1e6; …...

【leetcode hot 100 74】搜索二维矩阵

解法一&#xff1a;双重二分查找 class Solution {public boolean searchMatrix(int[][] matrix, int target) {int nmatrix.length, mmatrix[0].length;int row10, row2n-1, col10, col2m-1;int row_mid, col_mid;while(row1<row2){row_mid (row1row2)/2;while(col1<c…...

Maven 中 maven.test.skip 与skipTests 区别

在 Maven 中&#xff0c;maven.test.skip 和 skipTests 都用于控制测试的跳过行为&#xff0c;但它们的作用范围和底层机制有显著区别。以下是详细对比&#xff1a; 1. maven.test.skip 定义 maven.test.skip 是一个用户自定义属性&#xff08;需在 pom.xml 的 <propertie…...

LLM - R1 强化学习 DRPO 策略优化 DAPO 与 Dr. GRPO 算法 教程

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/146533892 在强化学习算法中&#xff0c;DAPO (Decoupled Clip and Dynamic Sampling Policy Optimization)&#xff0c;通过解耦裁剪和动态采样策…...

element-plus中,Loading 加载组件的使用

一.基本使用 给一个组件&#xff0c;如&#xff1a;table表格&#xff0c;加上v-loading"true"即可。 举例&#xff1a;复制如下代码。 <template><el-table v-loading"loading" :data"tableData" style"width: 100%"><…...

部署完dify:localhost/install 页面不停转圈圈,报错CROS error

解决办法 docker/.env 文件中&#xff0c;需要配置如下&#xff1a; NGINX_HTTPS_ENABLEDtrue NGINX_ENABLE_CERTBOT_CHALLENGEtrue 把Nginx的跨域请求打开...

UE4学习笔记 FPS游戏制作17 让机器人持枪 销毁机器人时也销毁机器人的枪 让机器人射击

添加武器插槽 打开机器人的Idle动画&#xff0c;方便查看武器位置 在动画面板里打开骨骼树&#xff0c;找到右手的武器节点&#xff0c;右键添加一个插槽&#xff0c;重命名为RightWeapon&#xff0c;右键插槽&#xff0c;添加一个预览资产&#xff0c;选择Rifle&#xff0c;根…...

【网络丢包】原因排查及优化

在流式响应中&#xff0c;丢包现象可能由多种因素引起&#xff0c;详细的原因分析、排查方法及优化策略&#xff1a; 一、丢包原因分析 网络拥塞 当网络带宽不足或流量突增时&#xff0c;路由器/交换机可能丢弃超出处理能力的数据包。 硬件问题 网卡、路由器、交换机等设备故…...

Spring Boot 实战:MD5 密码加密应用全解析

Spring Boot 实战&#xff1a;MD5 密码加密应用全解析 1. 引言 在应用开发中&#xff0c;密码安全是用户隐私保护的核心环节。直接存储明文密码存在极大的安全风险&#xff08;如数据库泄露导致用户信息被盗&#xff09;。MD5 加密作为一种广泛使用的哈希算法&#xff0c;可将…...

Android 底部EditView输入时悬浮到软键盘上方

1. 修改 Activity 的 Manifest 配置 确保你的 Activity 在 AndroidManifest.xml 中有以下配置&#xff1a; <activityandroid:name".YourActivity"android:windowSoftInputMode"adjustResize|stateHidden" /> 关键点&#xff1a; adjustResize 是…...

【deepseek 学c++】weakptr引用场景

std::weak_ptr 是 C 中与 std::shared_ptr 配合使用的智能指针&#xff0c;它本身不拥有资源的所有权&#xff0c;仅观察资源的状态&#xff0c;主要用于解决 shared_ptr 的循环引用问题和临时访问共享资源的需求。以下是 weak_ptr 的典型应用场景和核心价值&#xff1a;![ 为…...

从技术架构和生态考虑,不是单纯的配置优化,还有哪些方式可以提高spark的计算性能

从技术架构和生态系统层面提升Spark的计算性能&#xff0c;可采取以下核心策略&#xff1a; 一、计算模型重构与执行引擎升级 1. 弹性分布式数据集&#xff08;RDD&#xff09;的血统优化 通过RDD的Lineage&#xff08;血统&#xff09;机制实现容错时&#xff0c;采用增量式…...

怎样进行服务器的日常安全监控和审计?

服务器的日常安全监控和审计是保障服务器安全运行的重要措施&#xff0c;以下是一些常见的方法和工具&#xff1a; 系统日志监控 启用日志功能&#xff1a;确保服务器操作系统、应用程序和数据库等都启用了详细的日志记录功能。例如&#xff0c;Linux 系统中的 syslog&#x…...

Java 集合框架面经

1、说说有哪些常见的集合框架&#xff1f; 集合框架可以分为两条大的支线&#xff1a; Map 接口&#xff1a;表示键值对的集合&#xff0c;一个键映射到一个值。键不能重复&#xff0c;每个键只能对应一个值。Map 接口的实现类包括 HashMap、LinkedHashMap、TreeMap 等。Colle…...

【已解决】Git:为什么 .gitignore 不生效?如何停止跟踪已提交文件并阻止推送?

你可能遇到的问题 你已经提交了某个文件夹&#xff08;如 dataset&#xff09;到 Git 仓库&#xff0c;之后修改了它&#xff0c;但发现修改内容被 Git 持续跟踪&#xff0c;无法通过 .gitignore 忽略。尝试在 .gitignore 中添加规则后&#xff0c;修改的文件仍然显示为"…...

MOSN(Modular Open Smart Network)-04-TLS 安全链路

前言 大家好&#xff0c;我是老马。 sofastack 其实出来很久了&#xff0c;第一次应该是在 2022 年左右开始关注&#xff0c;但是一直没有深入研究。 最近想学习一下 SOFA 对于生态的设计和思考。 sofaboot 系列 SOFAStack-00-sofa 技术栈概览 MOSN&#xff08;Modular O…...

SICAR 标准 KUKA 机器人标准功能块说明手册

功能块名称:LSicar_Robot_KUKA_PrD 目录 1. 概述 2. 功能说明 2.1 程序控制 2.2 状态监控 2.3 报警与故障处理 2.4 驱动控制 3. 关键参数说明 4. 操作步骤指南 4.1 初始化配置 4.2 运行控制 4.3 状态监控 5. 常见故障处理 6. 注意事项 附录1:程序段索引 附录…...

QT三 自定义控件,自定义控件的事件处理自定义事件过滤,原始事件过滤

一 自定义控件 现在的需求是这样&#xff1a; 假设我们要在QWidget 上做定制&#xff0c;这个定制包括了关于 一些事件处理&#xff0c;意味着要重写QWidget的一些代码&#xff0c;这是不实际的&#xff0c;因此我们需要自己写一个MyWidget继承QWidget&#xff0c;然后再MyWi…...

Leetcode算法方法总结

1. 双指针法解决链表/数组题目 只要数组有序&#xff0c;就要想到双指针做法。还有二分法 回文串一般也会用到双指针&#xff0c;回文串的长度由于可能是奇数也可能是偶数&#xff0c;所以在寻找时&#xff0c;既需要寻找奇数长度的回文串&#xff0c;也需要寻找偶数长度的回文…...

【Elasticsearch基础】基本核心概念介绍

Elasticsearch作为当前最流行的分布式搜索和分析引擎&#xff0c;其强大的功能背后是一套精心设计的核心概念体系。本文将深入解析Elasticsearch的五大核心概念&#xff0c;帮助开发者构建坚实的技术基础&#xff0c;并为高效使用ES提供理论支撑。 1 索引&#xff08;Index&…...

docker远程debug

1. 修改 Java 启动命令 在 Docker 容器中启动 Java 程序时&#xff0c;需要添加 JVM 调试参数&#xff0c;jdk8以上版本 java -agentlib:jdwptransportdt_socket,servery,suspendn,address*:5005 -jar your-app.jar jdk8及以下版本&#xff1a; java -Xdebug -Xrunjdwp:tra…...

华为eNSP-配置静态路由与静态路由备份

一、静态路由介绍 静态路由是指用户或网络管理员手工配置的路由信息。当网络拓扑结构或者链路状态发生改变时&#xff0c;需要网络管理人员手工修改静态路由信息。相比于动态路由协议&#xff0c;静态路由无需频繁地交换各自的路由表&#xff0c;配置简单&#xff0c;比较适合…...

CentOS 7下安装PostgreSQL 15

一、简介 PostgreSQL是一种特性非常齐全的自由软件的对象-关系型数据库管理系统&#xff08;ORDBMS&#xff09;&#xff0c;是以加州大学计算机系开发的POSTGRES&#xff0c;4.2版本为基础的对象关系型数据库管理系统。POSTGRES的许多领先概念只是在比较迟的时候才出现在商业…...

时序数据库 InfluxDB(一)

时序数据库 InfluxDB&#xff08;一&#xff09; 数据库种类有很多&#xff0c;比如传统的关系型数据库 RDBMS&#xff08; 如 MySQL &#xff09;&#xff0c;NoSQL 数据库&#xff08; 如 MongoDB &#xff09;&#xff0c;Key-Value 类型&#xff08; 如 redis &#xff09…...

动态添加view方法-微信小程序

在微信小程序中&#xff0c;通过动态数据绑定和条件渲染来实现动态添加 view 组件的效果。 以下是一个简单的示例&#xff0c;展示如何根据数据动态添加 view。 WXML 文件 在 WXML 文件中&#xff0c;使用 wx:for 指令来遍历数组&#xff0c;并动态生成 view 组件。 <view…...

Java中清空集合列表元素有哪些方式

在 Java 里&#xff0c;存在多种清空列表的方式&#xff0c;下面为你汇总并附上对应的示例代码&#xff1a; import java.util.ArrayList; import java.util.List;public class ListClearDemo {public static void main(String[] args) {// 初始化一个列表List<String> …...

QOpenGLWidget动态加载功能实现教程(Qt+OpenGL)

QOpenGLWidget动态加载功能实现教程 我需要在Qt里面使用QOpenGLWidget显示OpenGL窗口&#xff0c;并且需要实现加载模型后重新渲染更新窗口的功能&#xff0c;但是一直无法更新被卡住了&#xff0c;现在把问题解决了总结一下整个实现过程。 创建一个自己的OpenGLWidget类 QOp…...

00.【Linux系统编程】 Linux初识(云服务器设置CentOS并使用、Xshell链接云服务器)

目录 一、华为云服务器免费体验申请 二、Xshell远程链接创建好的华为云服务器 2.1 下载Xshell 2.2 Xshell远程连接华为云服务器 一、华为云服务器免费体验申请 华为云官网 1. 进入华为云官网&#xff0c;最上面一栏点活动&#xff0c;并进入免费体验中心。 2. 找到含有“…...

数据结构-二叉链表存储的二叉树

树形结构是一类重要的非线性数据结构&#xff0c;其中以树和二叉树最为常用。对于每一个结点至多只有两课子树的一类树&#xff0c;称其为二叉树。二叉树的链式存储结构是一类重要的数据结构&#xff0c;其形式定义如下&#xff1a; 而二叉树的前序、中序遍历是非常重要的能够访…...

鸿蒙Flutter实战:20. Flutter集成高德地图,同层渲染

本文以同层渲染为例&#xff0c;介绍如何集成高德地图 完整代码见 Flutter 鸿蒙版 Demo 概述 Dart 侧 核心代码如下&#xff0c;通过 OhosView 来承载原生视图 OhosView(viewType: com.shaohushuo.app/customView,onPlatformViewCreated: _onPlatformViewCreated,creation…...

idea中快速注释函数

在IntelliJ IDEA中&#xff0c;有多种方法可以快速注释函数。 使用快捷键 你可以使用以下快捷键来快速注释函数[3]&#xff1a; 行注释&#xff1a;使用Ctrl/&#xff08;Windows系统&#xff09;或Command/&#xff08;Mac系统&#xff09;可以在当前行前添加或删除单行注释…...

Leetcode13-罗马数字转整数

题目链接&#xff1a;13. 罗马数字转整数 - 力扣&#xff08;LeetCode&#xff09; 如同上一题&#xff0c;直接用暴力法破解&#xff0c;简单好理解 int romanToInt(char* s) {int len strlen(s);int res 0;for(int i 0; i < len; i) {switch(s[i]) {case M:res 1000…...

3、pytest实现参数化

在 pytest 中&#xff0c;参数化&#xff08;parametrization&#xff09;是一种强大的功能&#xff0c;可以让你用不同的输入数据重复执行同一个测试函数。这种功能非常有用&#xff0c;可以帮助你显著减少重复代码并提高测试覆盖率。 参数化的主要作用是&#xff1a; 测试多…...

深入理解指针(4)(C语言版)

文章目录 前言一、回调函数是什么&#xff08;一&#xff09;定义&#xff08;二&#xff09;工作原理&#xff08;三&#xff09;应用场景 二、qsort举例&#xff08;一&#xff09;qsort函数简介&#xff08;二&#xff09;比较函数的定义&#xff08;三&#xff09;使用示例…...

【 <二> 丹方改良:Spring 时代的 JavaWeb】之 Spring Boot 中的日志管理:Logback 的集成

<前文回顾> 点击此处查看 合集 https://blog.csdn.net/foyodesigner/category_12907601.html?fromshareblogcolumn&sharetypeblogcolumn&sharerId12907601&sharereferPC&sharesourceFoyoDesigner&sharefromfrom_link <今日更新> 一、开篇整…...