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

【多选框、表格全选】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

话不多说 先看效果&#xff1a; 多选框&#xff1a; 表格全选&#xff1a; <template><div><div class"titleLabel"><div class"lineStyle"></div>统计部门</div><div style"display: flex"><e…...

【Java】微服务负载均衡算法实现

前言 本篇实现一下分布式中负载均衡的实现策略&#xff0c;以及负载均衡算法是如何实现的。 什么是负载均衡&#xff1f; Java负载均衡是指在多台服务器之间分配负载&#xff0c;以提高服务器的性能和可用性。它通过将请求分发到多台服务器来减少单个服务器的压力&#xff0…...

分类、回归常用损失函数

分类&#xff1a; 交叉熵损失函数&#xff08;Cross-entropy loss function&#xff09; KL散度、交叉熵损失函数、nn.CrossEntropyLoss()_HealthScience的博客-CSDN博客 权重交叉熵损失函数&#xff08;Weighted cross-entropy loss function&#xff09; BCEWithLogitsLo…...

SaaS到底是什么,如何做?这份笔记讲明白了

阅读本篇文章&#xff0c;您将可以了解&#xff1a;1、什么是SaaS&#xff1b;2、SaaS的商业模式&#xff1b;3、SaaS的技术架构&#xff1b;4、国内比较好的SaaS平台。 一、什么是SaaS SaaS即软件即服务&#xff08;Software as a Service&#xff09;&#xff0c;是一种通过…...

Python 单继承、多继承、@property、异常、文件操作、线程与进程、进程间通信、TCP框架 7.24

单继承 class luban:def __init__(self, name):self.name nameself.skill "摸鱼飞弹"self.damageLevel 20def attack(self):print("{} 使用了技能{} &#xff0c;给敌方带来了极大的困扰\n""并有{}% 的机会造成一击必杀的效果".format(self.…...

【英杰送书第三期】Spring 解决依赖版本不一致报错 | 文末送书

Yan-英杰的主 悟已往之不谏 知来者之可追 C程序员&#xff0c;2024届电子信息研究生 目录 问题描述 报错信息如下 报错描述 解决方法 总结 【粉丝福利】 【文末送书】 目录&#xff1a; 本书特色&#xff1a; 问题描述 报错信息如下 Description:An attempt…...

ClickHouse修改和删除操作

文章目录 ClickHouse介绍为什么不推荐更新和删除如何实现更新操作如何实现删除操作官方文档 ClickHouse介绍 ClickHouse是由俄罗斯的Yandex公司开发的一款快速、可扩展的列式数据库管理系统。它专门针对OLAP场景设计&#xff0c;在海量数据分析和查询方面具有出色的性能表现&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&#xff0c;这里是Token_w的文章&#xff0c;主要讲解python的基础学习&#xff0c;希望对大家有所帮助 整理不易&#xff0c;感觉还不错的可以点赞收藏评论支持&#xff0c;感谢&#xff01; 目录 一. Python执行原理二. Python内部执行过程2.1 编译过程概述2.2 过程图解…...

opencv 图像距离变换 distanceTransform

图像距离变换&#xff1a;计算图像中每一个非零点距离离自己最近的零点的距离&#xff0c;然后通过二值化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属于竞争关系&#xff0c;一个消息只有一个消费者可以取到。 代码部分只需要用两个消费者进程监听同一个队里即可。 两个消费者呈现竞争关…...

QT实现用户登录注册功能

本文实例为大家分享了QT实现用户登录注册的具体代码&#xff0c;供大家参考&#xff0c;具体内容如下 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以及云仓三个条线商机&#xff0c;每个条线商机规则差异比较大&#xff0c;当前现状是独立实现三套系统分别做支撑。 2 目标 2022年下半年CRM目标是完成9个新条线业务接入&#xff0c;完成销售过程线上化&#xff0c;实现销售规则统一。 …...

STM32CUBUMX配置RS485(中断接收)--保姆级教程

———————————————————————————————————— ⏩ 大家好哇&#xff01;我是小光&#xff0c;嵌入式爱好者&#xff0c;一个想要成为系统架构师的大三学生。 ⏩最近在开发一个STM32H723ZGT6的板子&#xff0c;使用STM32CUBEMX做了很多驱动&#x…...

苹果iOS 16.6 RC发布:或为iPhone X/8系列养老版本

今天苹果向iPhone用户推送了iOS 16.6 RC更新(内部版本号&#xff1a;20G75)&#xff0c;这是时隔两个月的首次更新。 按照惯例RC版基本不会有什么问题&#xff0c;会在最近一段时间内直接变成正式版&#xff0c;向所有用户推送。 需要注意的是&#xff0c;鉴于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)&#xff0c;包括处理器、外设和存储器控制器。相较于传统的仅有ARM处理器或 FPGA 的嵌入式芯片&#xff0c;SOC FPGA既…...

MySQL vs. Oracle: 函数比较与联系

引言 MySQL和Oracle是两个广泛使用的关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;它们提供了丰富的函数库来处理和操作数据。本文将详细介绍MySQL和Oracle的所有函数&#xff0c;并逐一介绍它们的相同和不同之处&#xff0c;以帮助读者更好地理解和使用这两…...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...

TDengine 快速体验(Docker 镜像方式)

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...