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

news2024/11/26 10:25:22

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

<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>

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

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

相关文章

服务网格简介:探索现代微服务架构中的服务网格概念和价值

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…

Tiktok最全客户开发以及运营攻略,建议收藏

Tiktok最近很多粉丝朋友问我要怎么做&#xff0c;今天就来分享一下如何利用Tiktok开发客户以及运营思路&#xff0c;文章略长&#xff0c;需要安装包看文末&#xff0c;喜欢的点赞加关注。 一、外贸企业为什么要做Tiktok‍ TikTok作为一个全球范围内流行的短视频平台&#xf…

Django3 模糊查询/filters.SearchFilter的使用,基于viewsets.ModelViewSet

背景描述 模型 from django.db import modelsfrom interfaces.validate import validate_include from testcases.models import Testcases from utils.base_models import BaseModel from utils.pure_validator import JSONValidatorclass Interfaces(BaseModel):id models…

嵌入式Linux驱动开发——常见框架梳理

前言 本文主要介绍了Linux驱动开发中一些常用的驱动框架&#xff0c;platform、input、iic、spi等&#xff0c;硬件平台使用的是正点原子的imx6ull开发板。 一&#xff1a;Pinctrl子系统、Gpio子系统 不管什么框架最后都是要追溯到配置IO的电气属性和复用功能 如果要使用外部…

一起学数据结构(1)——复杂度

目录 1. 时间复杂度&#xff1a; 1.1 时间复杂度的概念&#xff1a; 1.2 时间复杂度的表示及计算&#xff1a; 1.3 较为复杂的时间复杂度的计算&#xff1a; 2. 空间复杂度&#xff1a; 2.1 空间复杂度的概念&#xff1a; 2.2 空间复杂度的计算&#xff1a; 1. 时间复杂度…

Kubernetes 简介:容器编排与集群管理的进化

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…

Mybatis-plus从入门到精通

1、什么是MyBatis-Plus MyBatis-Plus&#xff08;简称MP&#xff09;是一个基于MyBatis的增强工具&#xff0c;在MyBatis的基础上对其进行扩展&#xff0c;用于简化MyBatis操作&#xff0c;提高开发效率。它继承了MyBatis原生的所有特性&#xff0c;并且添加了一些额外的功能&…

《TCP IP网络编程》第十章

第 10 章 多进程服务器端 10.1 进程概念及应用 并发服务端的实现方法&#xff1a; 通过改进服务端&#xff0c;使其同时向所有发起请求的客户端提供服务&#xff0c;以提高平均满意度。而且&#xff0c;网络程序中数据通信时间比 CPU 运算时间占比更大&#xff0c;因此&#…

探析国内数字孪生引擎技术现状

在数字孪生软件来发中&#xff0c;渲染引擎是一个关键点&#xff0c;国内大多数字孪生平台引擎通常使用的是自研的渲染引擎或者采用开源的渲染引擎。下面通过一些常见的渲染引擎在国内数字孪生引擎中的应用带大家了解数字孪生软件开发的方式。 自研渲染引擎&#xff1a;许多数…

CNN + Vision Transformer 结合学习

介绍三篇结合使用CNNTransformer进行学习的论文&#xff1a;CvT&#xff08;ICCV2021&#xff09;&#xff0c;Mobile-Former&#xff08;CVPR2022&#xff09;&#xff0c;SegNetr&#xff08;arXiv2307&#xff09;. CvT: Introducing Convolutions to Vision Transformers, …

利用 trait 实现多态

我在书上看到基于 std::io::Write 的示例&#xff0c;它是一个 trait 类型&#xff0c;内部声明了一些方法。和 go 语言不同&#xff0c;rust 中类型必须明确实现 trait 类型&#xff0c;而 go 语言属于 duck 模式。 std::io::Write下面的例子中调用 write_all 方式来演示&…

标签是系列色并且加粗帆软

标签是系列色并且加粗 function(){return <span style"color:this.color;">FR.contentFormat(this.value, #,##0)</span>;}

UI 自动化的 PageObject 设计模式

目录 前言&#xff1a; 什么是 PageObject 模型&#xff1f; 为什么使用 PageObject 模型&#xff1f; PO 模式优点 PageObject 实践 前言&#xff1a; UI 自动化是一种软件测试方法&#xff0c;它主要用于检查应用程序的用户界面是否符合预期。PageObject 是 UI 自动化中…

AI大模型时代下运维开发探索第一篇:ReAct工程初探

引子 人工智能大模型的出现&#xff0c;已渐渐地影响了我们的日常生活和工作方式。生活中无处不在的AI&#xff0c;使我们的生活变得更加智能和便捷。工作中&#xff0c;AI大模型的高效和精准&#xff0c;极大地提升了我们解决问题的效率。 是的&#xff0c;我们不能忽视AI大…

Delphi 开发者,显示图片请忘掉VCL中的 TImage 吧

目录 序言 使用TImageCollection和TVirtualImageList组件支持高分辨率图像 一、总览 二、使用图像收集组件TImageCollection 2.1 图像收集组件编辑器 2.2 将现有 TImageList 载入 TImageCollection 三、使用Virtual ImageList 组件 3.1 Virtual ImageList Component 编辑…

【数据结构】| 王道考研——树的前世今生

目录 一. &#x1f981; 前言二. &#x1f981; 各种树的知识点1. 树1.1 概念1.2 属性1.3 常考性质1.4 树转换成二叉树1.5 森林转换为二叉树1.6 二叉树转换为森林1.7 树的遍历1.8 森林的遍历 2. 二叉树2.1满二叉树2.2 完全二叉树2.3二叉排序树2.4 平衡二叉树2.5 二叉树常考性质…

IDEA使用lombok实体类加上@Data注解后无法找到get和set方法

文章目录 一、问题原因二、解决方法1.File→Settings2.Plugins→搜索"lombok"→Install3.Restart IDE&#xff08;重启IDEA&#xff09; 一、问题原因 IDEA没有安装lombok插件 二、解决方法 1.File→Settings 2.Plugins→搜索"lombok"→Install 3.Restart…

北斗定位导航系统,北斗模块应用领域发展概况_北斗二号模块,北斗三号模块

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、北斗系统概述1.1 空间段1.2 地面控制段1.3 用户段1.4 坐标系统1.5 时间系统 二、北斗系统定位导航授时服务2.1 服务概述2.2 服务区2.3 北斗信号频段2.4 北斗…

服务器中了Locked勒索病毒怎么解决,勒索病毒解密恢复方式与防护措施

服务器是企业重要数据存储和处理的关键设备&#xff0c;然而&#xff0c;众所周知&#xff0c;服务器系统并非完全免受网络攻击的。其中一种常见的威胁是勒索病毒&#xff0c;其中一种恶名昭彰的变种是Locked勒索病毒。Locked勒索病毒采用了对称AES与非对称RSA的加密形式&#…

【C++入门到精通】C++入门 —— 引用、内联函数

目录 一、引用 1.引用的概念 2.引用的特性 3.常引用 4.引用的使用场景 ⭕做参数 ⭕做返回值 5.传值、传引用效率比较 值和引用的作为返回值类型的性能比较 6.引用和指针的区别 引用和指针的不同点 二、内联函数 1.内联函数的概念 2.内联函数的特性 3.宏与内联函数 …