【多选框、表格全选】element el-checkbox、el-table

话不多说 先看效果:
多选框:
请添加图片描述
表格全选:
请添加图片描述

<template>
  <div>
        <div class="titleLabel">
          <div class="lineStyle"></div>
          统计部门
        </div>
        <div style="display: flex">
          <el-checkbox
            style="margin-right: 20px"
            :indeterminate="isIndeterminate"
            v-model="departmentCheckAll"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <el-checkbox-group
            v-model="selectedItems"
            @change="handleCheck(selectedItems)"
          >
            <el-checkbox
              v-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-button
                            style="margin-left: 10px"
                            type="primary"
                            v-if="!selectAll"
                            plain
                            size="small"
                            @click="all()"
                            >全选所有
                        </el-button>
                        <el-button
                            style="margin-left: 10px"
                            type="primary"
                            v-else
                            plain
                            size="small"
                            @click="all()"
                            >取消全选
                        </el-button>
                    </span>
                </div>
            </el-form-item>
            <el-form-item style="float: right">
                <!-- 分页-->
                <el-pagination
                    align="right"
                    background
                    layout="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>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Camtasia2023电脑录屏视频自动生成字幕软件

制作视频通常需要添加字幕&#xff0c;添加字幕比较麻烦的是让字幕和声音同步&#xff0c;使用好的软件可以大大提高剪辑效率&#xff0c;让视频更快制作完成。本文将给大家介绍录制视频自动生成字幕的软件设置字幕语音同步教程。 一、录屏视频自动生成字幕的软件 Camtasia是…

第一启富金:现货黄金市场等待央行决议 非美商品‘弱不禁风’

第一启富金基本面分析&#xff1a; 中国纸黄金交易通显示&#xff0c;全球最大黄金上市交易基金(ETF)截至07月22日持仓量为919.00吨&#xff0c;较上日增持5.20吨&#xff0c;本月止净减持2.90吨。 在俄罗斯上周退出黑海谷物协议&#xff0c;摧毁了乌克兰通往基辅的一条出口路线…

Json数据类型

原学习视频&#xff1a; 3.JSON文件操作_哔哩哔哩_bilibili Python提供了json包对JSON文件提供了读写操作 JSON查看器&#xff1a;JSON Viewer 实例演示&#xff1a;

redis(8):java连接redis

1 Jedis所需要的jar包依赖 <dependency><groupId>redis.clients</groupId><artifactId>jedis</artifactId><version>3.1.0</version></dependency> 2 Jedis常用操作 2.1 测试连通性 package com.example.demo;import redis.…

Vite + Vue3 + Ts 【免key、免账号实战本地运行GPT】

&#x1f414; 前期回顾 Vue3 Ts Vite —— 封装庆祝彩屑纷飞 示例_彩色之外的博客-CSDN博客封装 彩屑纷飞 示例https://blog.csdn.net/m0_57904695/article/details/131718019?spm1001.2014.3001.5501 目录 &#x1f30d; 公网 &#x1f6f9; 本地 &#x1fa82; 源码 &…

实现Aware接口使用Spring底层组件

实现Aware接口使用Spring底层组件 Aware接口的实现类 基于Component&#xff0c;通过Aware的实现类在容器创建之前将Spring底层的信息获取并使用。 例如&#xff1a; 获取应用上下文对象applicationContext的ApplicationContextAware获取该类的bean对象信息的BeanNameAware…

如何使用Java 实现excel模板导出---多sheet导出?

实现多个sheet的excel导出功能 效果展示&#xff1a; maven依赖 <dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>3.17</version></dependency><dependency><groupId>or…

为啥面试官总喜欢问computed是咋实现的?

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 从computed的特性出发 computed最耀眼的几个特性是啥&#xff1f; 1. 依赖追踪 1 2 3 4 5 6 7 8 9 10 import { reactive, computed } from vue const state reactive({ a: 1, b: 2, c: 3,…

PHP8知识详解:PHP8开发工具VS Code的安装

作为PHP8的开发工具有很多&#xff0c;具有IDE功能的有phpstorm、Visual Studio Code、Sublime Text、NetBeans、Eclipse、Codelobster、PHP Designer等&#xff0c;当然还有很多轻量的工具&#xff0c;比如Notepad、Editplus等。本文给你介绍的是万能编辑器Visual Studio Code…

gitee上创建新仓库如何clone到本地,并初始化项目

目录 一、克隆 方法一 方法二 二、初始化项目 构建基本框架 自动生成代码 一、克隆 方法一 由于github速度较慢&#xff0c;这里我们使用gitee。我们在gitee上面创建一个仓库&#xff0c;然后我们可以通过ideal直接克隆下来&#xff0c;仓库设置如下 接着使用ideal将项…

芯洲科技-降压DCDC开关电源参考选型目录

芯洲科技&#xff0c;是国内领先的中高压DC-DC&#xff08;直流转直流&#xff09;功率转换芯片供应商。北京冠宇铭通 一级代理。 国产化替代&#xff0c;对标TI&#xff0c;有很多料号可直接PIN TO PIN&#xff0c;比如TPS562200(SOT23-6)\TPS563200(SOT23-6)/TPS54540/LMR140…

【nginx】nginx之location规则详解:

文章目录 一、语法规则&#xff1a;二、优先级&#xff1a;三、验证&#xff1a;1、精确匹配&#xff1a;2、通过^~方式实现匹配&#xff1a;3、通过”~”方式实现匹配&#xff1a;4、通过"~*"方式实现匹配:5、”!~*” 和”!~” 不常用&#xff0c;再次不做介绍6、通…

cocosCreator 之 Button

版本&#xff1a; 3.4.0 参考&#xff1a;Button组件 简介 Button组件主要用于响应用户的点击操作&#xff0c;属性检查器中的示意图&#xff1a; Button组件的主要属性有&#xff1a; Interactable 表示按钮是否可交互&#xff0c;如果未勾选表示禁用Transition表示按钮状态…

JDK9 接口特性(heima)

JDK9 接口特性&#xff08;heima&#xff09; 将log方法私有化

three.js-解决外部模型太暗的问题

先看效果 优化前 优化后的效果 在网上找了好久&#xff0c;好多方法都过时了&#xff0c;还有调整自发光都不行&#xff0c;后来又调金属度的&#xff0c;试了下很ok, child.material.metalness 0.58;&#xff0c;完整例子看下边。 解决方案 调整模型的金属度 loader.lo…

web前端tips:js继承——原型链继承

原型链继承 原型链继承是 JavaScript 中实现继承的一种方式&#xff0c;它通过使用原型来实现对象之间的继承关系。 在 JavaScript 中&#xff0c;每个对象都有一个原型&#xff08;prototype&#xff09;&#xff0c;它是一个指向另一个对象的引用。当我们访问一个对象的属性…

java项目之社区生活超市管理系统(ssm+mysql+jsp)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于ssm的社区生活超市管理系统。技术交流和部署相关看文章末尾&#xff01; 开发环境&#xff1a; 后端&#xff1a; 开发语言&#xff1a;Java 框…

Redis高级篇(二)

Redis高级篇之多级缓存 什么是多级缓存 JVM进程缓存 Lua语法入门 实现多级缓存 缓存同步 一、什么是多级缓存 传统的缓存策略一般是请求到达Tomcat后&#xff0c;先查询Redis&#xff0c;如果未命中则查询数据库&#xff0c;如图&#xff1a; 存在下面的问题&#xff1a;…

TCP/UDP的首部

TCP/UDP首部信息 TCP首部第一个4字节第二个4字节与第三个4字节第四个4字节第五个4字节选项最大报文段长度&#xff08;MSS&#xff09;选项窗口扩大选项时间戳选项 什么时候发送RST包UDP首部 TCP首部 TCP 首部长度为20字节&#xff0c;加上选项部分最大可达60字节。 第一个4…

云原生|kubernetes|kubernetes集群部署神器kubekey安装部署高可用k8s集群(半离线形式)

前言&#xff1a; 云原生|kubernetes|kubernetes集群部署神器kubekey的初步使用&#xff08;centos7下的kubekey使用&#xff09;_晚风_END的博客-CSDN博客 前面利用kubekey部署了一个简单的非高可用&#xff0c;etcd单实例的kubernetes集群&#xff0c;经过研究&#xff0c;…