【多选框、表格全选】element el-checkbox、el-table
话不多说 先看效果:
多选框:

表格全选:

<template><div><div class="titleLabel"><div class="lineStyle"></div>统计部门</div><div style="display: flex"><el-checkboxstyle="margin-right: 20px":indeterminate="isIndeterminate"v-model="departmentCheckAll"@change="handleCheckAllChange">全选</el-checkbox><el-checkbox-groupv-model="selectedItems"@change="handleCheck(selectedItems)"><el-checkboxv-for="item in department":key="item.id":label="item.id">{{ item.name }}</el-checkbox></el-checkbox-group></div><div><el-tabs v-model="form.pageTab" @tab-click="changeTab"><el-tab-pane name="1"><div slot="label">已关联({{sumAll['rel']}})</div></el-tab-pane><el-tab-pane name="0"><div slot="label">未关联({{sumAll['notRel']}})</div></el-tab-pane></el-tabs><el-table :data="tableData" stripe border :header-cell-style="{'text-align':'center'}" size="small" ref="table"@selection-change="handleChange" :row-key="row=>row.id"><el-table-column type="selection" :reserve-selection="true" :selectable="selectableAll" align="center"></el-table-column><el-table-column label="单位名称" align="center" prop="name"></el-table-column><el-table-column label="统一社会信用代码" align="center"></el-table-column></el-table><br><!-- 分页--><el-form :inline="true"><el-form-item ><div v-if="where"><span v-if="!selectAll">已选:{{ relIds.length }}/{{ total }}</span><span v-else> 已选:{{ total }}/{{ total }} </span><span><el-buttonstyle="margin-left: 10px"type="primary"v-if="!selectAll"plainsize="small"@click="all()">全选所有</el-button><el-buttonstyle="margin-left: 10px"type="primary"v-elseplainsize="small"@click="all()">取消全选</el-button></span></div></el-form-item><el-form-item style="float: right"><!-- 分页--><el-paginationalign="right"backgroundlayout="prev, pager, next,total":current-page.sync="form['pageNum']":page-size.sync="form['pageSize']"@current-change="jump"@size-change="resize":total="total"></el-pagination></el-form-item></el-form></div></el-dialog></div>
</template><script>
import { departmentList } from "@/api/assets/assetArchives";
export default {data() {return {form: {},dialogVisible: false,isIndeterminate: false,department: [], //部门departmentCheckAll: false,selectedItems: [],relIds:[],total:0,selectAll:false, //表格是否全选};},methods: {show() {this.departmentList();this.dialogVisible = true;},departmentList() {departmentList({ type: "INNER", pagination: false }).then((data) => {this.department = data["items"];// this.selectedItems = [132,51] //回显选中的部门(到时候应该是把check为true的id筛选出来)});},handleCheck(value) {let checkedCount = value.length;this.departmentCheckAll = checkedCount === this.department.length;this.isIndeterminate =checkedCount > 0 && checkedCount < this.department.length;},handleCheckAllChange(val) {this.selectedItems = val? this.department.map((item) => {return item.id;}): [];this.isIndeterminate = false;},//选择handleChange(val) {let arr = []val.map(item => {arr.push(item.id)})this.relIds = arr;},//全选all() {let title = this.selectAll ? "取消默认全选" : "默认全选";this.$confirm("此操作将" + title + "所有,是否确认继续?", "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {// 全选表格中的所有数据this.selectAll = !this.selectAll;if (this.selectAll) this.toggleSelection(this.tableData);else this.toggleSelection();});},//点击全选时 默认不能进行修改selectableAll() {return !this.selectAll;},//选中状态标志toggleSelection(rows) {if (this.relIds) this.$refs.table.clearSelection();if (rows) {rows.forEach((row) => {this.$refs.table.toggleRowSelection(row);});} else {this.$refs.table.clearSelection();}},//分页情况jump(e) {this.form.pageNum = e;this.list();},resize(e) {this.form.pageSize = e;this.list();},},
};
</script>
相关文章:
【多选框、表格全选】element el-checkbox、el-table
话不多说 先看效果: 多选框: 表格全选: <template><div><div class"titleLabel"><div class"lineStyle"></div>统计部门</div><div style"display: flex"><e…...
【Java】微服务负载均衡算法实现
前言 本篇实现一下分布式中负载均衡的实现策略,以及负载均衡算法是如何实现的。 什么是负载均衡? Java负载均衡是指在多台服务器之间分配负载,以提高服务器的性能和可用性。它通过将请求分发到多台服务器来减少单个服务器的压力࿰…...
分类、回归常用损失函数
分类: 交叉熵损失函数(Cross-entropy loss function) KL散度、交叉熵损失函数、nn.CrossEntropyLoss()_HealthScience的博客-CSDN博客 权重交叉熵损失函数(Weighted cross-entropy loss function) BCEWithLogitsLo…...
SaaS到底是什么,如何做?这份笔记讲明白了
阅读本篇文章,您将可以了解:1、什么是SaaS;2、SaaS的商业模式;3、SaaS的技术架构;4、国内比较好的SaaS平台。 一、什么是SaaS SaaS即软件即服务(Software as a Service),是一种通过…...
Python 单继承、多继承、@property、异常、文件操作、线程与进程、进程间通信、TCP框架 7.24
单继承 class luban:def __init__(self, name):self.name nameself.skill "摸鱼飞弹"self.damageLevel 20def attack(self):print("{} 使用了技能{} ,给敌方带来了极大的困扰\n""并有{}% 的机会造成一击必杀的效果".format(self.…...
【英杰送书第三期】Spring 解决依赖版本不一致报错 | 文末送书
Yan-英杰的主 悟已往之不谏 知来者之可追 C程序员,2024届电子信息研究生 目录 问题描述 报错信息如下 报错描述 解决方法 总结 【粉丝福利】 【文末送书】 目录: 本书特色: 问题描述 报错信息如下 Description:An attempt…...
ClickHouse修改和删除操作
文章目录 ClickHouse介绍为什么不推荐更新和删除如何实现更新操作如何实现删除操作官方文档 ClickHouse介绍 ClickHouse是由俄罗斯的Yandex公司开发的一款快速、可扩展的列式数据库管理系统。它专门针对OLAP场景设计,在海量数据分析和查询方面具有出色的性能表现&a…...
比selenium体验更好的ui自动化测试工具: cypress介绍
话说 Cypress is a next generation front end testing tool built for the modern web. And Cypress can test anything that runs in a browser.Cypress consists of a free, open source, locally installed Test Runner and a Dashboard Service for recording your tests.…...
Python编译过程和执行原理
hello,这里是Token_w的文章,主要讲解python的基础学习,希望对大家有所帮助 整理不易,感觉还不错的可以点赞收藏评论支持,感谢! 目录 一. Python执行原理二. Python内部执行过程2.1 编译过程概述2.2 过程图解…...
opencv 图像距离变换 distanceTransform
图像距离变换:计算图像中每一个非零点距离离自己最近的零点的距离,然后通过二值化0与非0绘制图像。 #include "iostream" #include "opencv2/opencv.hpp" using namespace std; using namespace cv;int main() {Mat img, dst, dst…...
消息队列——rabbitmq的不同工作模式
目录 Work queues 工作队列模式 Pub/Sub 订阅模式 Routing路由模式 Topics通配符模式 工作模式总结 Work queues 工作队列模式 C1和C2属于竞争关系,一个消息只有一个消费者可以取到。 代码部分只需要用两个消费者进程监听同一个队里即可。 两个消费者呈现竞争关…...
QT实现用户登录注册功能
本文实例为大家分享了QT实现用户登录注册的具体代码,供大家参考,具体内容如下 1、login.h ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 #ifndef LOGIN_H #define LOGIN_H #include <QWidget> namespace Ui { c…...
Docker--harbor私有仓库部署与管理
目录 一、构建私有库 1.下载 registry 镜像 2.在 daemon.json 文件中添加私有镜像仓库地址 3.运行 registry 容器 4.为镜像打标签 5.上传到私有仓库 6.列出私有仓库的所有镜像 7.列出私有仓库的centos镜像有哪些tag 8.测试私有仓库下载 二、Harbor 简介 1.什么是Harb…...
idea复制一份web服务在不同端口启动
Idea 运行多个微服务 Idea 一个服务开启多个端口运行 idea 开启多个端口服务_idea开启多个服务_HaHa_Sir的博客-CSDN博客 IntelliJ IDEA 中一个服务按多个端口同时启动与显示Services面板_一个服务多个端口_Touch&的博客-CSDN博客 Idea中一个服务按多个端口同时启动_idea…...
CRM系统化整合从N-1做减法实践 | 京东物流技术团队
1 背景 京销易系统已经接入大网、KA以及云仓三个条线商机,每个条线商机规则差异比较大,当前现状是独立实现三套系统分别做支撑。 2 目标 2022年下半年CRM目标是完成9个新条线业务接入,完成销售过程线上化,实现销售规则统一。 …...
STM32CUBUMX配置RS485(中断接收)--保姆级教程
———————————————————————————————————— ⏩ 大家好哇!我是小光,嵌入式爱好者,一个想要成为系统架构师的大三学生。 ⏩最近在开发一个STM32H723ZGT6的板子,使用STM32CUBEMX做了很多驱动&#x…...
苹果iOS 16.6 RC发布:或为iPhone X/8系列养老版本
今天苹果向iPhone用户推送了iOS 16.6 RC更新(内部版本号:20G75),这是时隔两个月的首次更新。 按照惯例RC版基本不会有什么问题,会在最近一段时间内直接变成正式版,向所有用户推送。 需要注意的是,鉴于iOS 17正式版即将…...
【100天精通python】Day16:python 模块的搜索目录和导入模块异常时的处理方法
目录 1 搜索模块所在目录 2 模块不在搜索目录中 2.1 添加模块所在的目录到PYTHONPATH环境变量 2.2 修改sys.path 2.3 使用绝对路径导入 2.4将模块复制到Python搜索路径中的任意一个目录 2.5 总结 3 其他导入的模块异常处理 3.1 模块未安装 3.2 模块名称拼写错误 3.3模…...
SOC FPGA介绍及开发设计流程
目录 一、SoC FPGA简介 二、SoC FPGA开发流程 2.1 硬件开发 2.2 软件开发 一、SoC FPGA简介 SOC FPGA是在FPGA架构中集成了基于ARM的硬核处理器系统(HPS),包括处理器、外设和存储器控制器。相较于传统的仅有ARM处理器或 FPGA 的嵌入式芯片,SOC FPGA既…...
MySQL vs. Oracle: 函数比较与联系
引言 MySQL和Oracle是两个广泛使用的关系型数据库管理系统(RDBMS),它们提供了丰富的函数库来处理和操作数据。本文将详细介绍MySQL和Oracle的所有函数,并逐一介绍它们的相同和不同之处,以帮助读者更好地理解和使用这两…...
机器学习期末考突击指南:从线性回归到SVM的实战解题技巧
机器学习期末考突击指南:从线性回归到SVM的实战解题技巧 期末考试临近,面对机器学习课程中纷繁复杂的算法和公式,许多同学感到无从下手。本文将从实际考题出发,手把手带你攻克线性回归、朴素贝叶斯和SVM三大核心考点,不…...
不止于仿真:用COMSOL LiveLink玩转超声相控阵动态聚焦与参数化扫描
超越静态仿真:COMSOL LiveLink在超声相控阵动态聚焦中的高阶应用 当超声相控阵技术遇上COMSOL的多物理场仿真能力,工程师们便获得了一把打开声波精准操控之门的钥匙。不同于传统静态仿真,动态聚焦与参数化扫描技术让声场控制如同探照灯般灵活…...
Python串口助手开发避坑实录:新手用tkinter+pyserial常遇到的5个典型问题及解决
Python串口助手开发避坑指南:5个典型问题与实战解决方案 第一次用Python开发串口调试工具时,那种既兴奋又忐忑的心情我至今记得。看着自己写的界面能收发数据,成就感爆棚;但随之而来的各种奇怪问题,又让人抓狂。本文将…...
VAP;SNTRVAP
一、基本信息名称:VAP peptide单字母序列:SNTRVAP三字母序列:Ser-Asn-Thr-Arg-Val-Ala-Pro长度:7 个氨基酸(7‑mer)类型:线性多肽,无 Cys、无 Met、无 Trp,氧化稳定性极佳…...
SEO_从入门到精通,掌握SEO的核心操作步骤
<h2>SEO从入门到精通,掌握SEO的核心操作步骤</h2> <p>在当今的互联网时代,搜索引擎优化(SEO)已经成为任何网站或网页希望获得高流量、高曝光的关键技能。无论你是一个初学者,还是已经有一些SEO基础的…...
成本控制艺术:OpenClaw+百川2-13B量化版的Token节省技巧
成本控制艺术:OpenClaw百川2-13B量化版的Token节省技巧 1. 为什么需要关注Token消耗? 当我第一次在本地部署OpenClaw并接入百川2-13B量化版模型时,就被它强大的自动化能力震撼了。这个组合可以让我的电脑像真人一样处理各种任务——从整理文…...
**基于Python与Neo4j的知识图谱构建实践:从数据到语义网络的跃迁**在人工智能与大数据深度融合
基于Python与Neo4j的知识图谱构建实践:从数据到语义网络的跃迁 在人工智能与大数据深度融合的时代,知识图谱已成为智能问答、推荐系统、语义搜索等场景的核心基础设施。本文将围绕 Python Neo4j 构建一个小型但功能完整的知识图谱系统,带你完…...
别再只用M法了!手把手教你用Arduino和旋转编码器实现M/T法测速(附代码)
别再只用M法了!手把手教你用Arduino和旋转编码器实现M/T法测速(附代码) 在电机控制项目中,精确的速度测量往往是实现闭环控制的第一步。许多初学者会直接采用简单的M法(频率测量法),但在实际测试…...
微带贴片天线基础计算
2GHz微带阵列天线,HFSS仿真模型,介质板为FR4,增益4.5dBi,驻波小于1.5。最近在捣鼓2GHz频段的微带阵列天线设计,用HFSS建模仿真时遇到不少有意思的问题。FR4板材这玩意儿看着普通,实际用在天线设计里真得小心…...
3步实现文献影响力自动化追踪:Zotero学术插件使用指南
3步实现文献影响力自动化追踪:Zotero学术插件使用指南 【免费下载链接】zotero-google-scholar-citation-count Zotero plugin for fetching number of citations from Google Scholar. 项目地址: https://gitcode.com/gh_mirrors/zo/zotero-google-scholar-citat…...
