vue+elementUI 添加多个可以全选的多选框

elementUI-checkbox官网:https://element.eleme.cn/#/zh-CN/component/checkbox
在这里插入图片描述

一、要做上面这种效果,首先要了解全选框中indeterminate 状态和v-model的变量的关系 参考 -Dayer-:

<el-checkbox :indeterminate="isIndeterminate" v-model="selected" @change="handleCheckAllChange($event, 'hd')">华东</el-checkbox>

对于indeterminate和v-model绑定的isIndeterminate和selected的值分别为:

isIndeterminateselected描述结果
truetrue或false样式为 -,不确定状态
falsetrue样式为 √,被选中状态
falsefalse不勾,没有被选中

总结:isIndeterminate 在全选和未被全选状态下都是 false,其他状态下是 trueselected 只有全选状态下是 true,其他都是 false(或者你也可以设置成:只要子级被选中,那么selected=true,子级一个都没有被选,selected=false。我在这里用的是第一个)。


二、具体案例参考:https://www.jb51.net/article/148826.htm

1. 做这种有多个全选复选框的,最好是让后台帮忙加一下字段,不然就跟官网上的案例一样,每个一级菜单下添加一个数组变量用来存放数据。
字段isIndeterminate(全选复选框显示状态),selected(CheckBox选中状态,是否被选中)。

[{isIndeterminate:false, list:null, menuId:2, menuName:"行业管理", selected:false},{isIndeterminate:false, list:[{list:null, menuId:4, menuName:"企业管理", selected:false},{list:null, menuId:5, menuName:"数据生成", selected:false},{list:null, menuId:6, menuName:"数据下载", selected:false},], menuId:3, menuName:"企业管理", selected:false},{isIndeterminate:false, list:[{list:null, menuId:8, menuName:"信息导入", selected:false},{list:null, menuId:9, menuName:"物流单据信息查询", selected:false},{list:null, menuId:10, menuName:"其他单据信息查询", selected:false},], menuId:7, menuName:"单据管理", selected:false},
]

在一级菜单下添加:isIndeterminateselected,二级菜单下每条数据只要添加 selected 就行了。

2. 思路
在这里插入图片描述
注释部分有很多是废话,方便理解,开发时可以删除,留下自己认为比较重要的注释就可以啦~

3. 具体代码
(1)模板部分代码:

<el-dialog :title="dialogTitle" :visible.sync="isDialog" width="620px" v-if="isDialog">
<el-form :inline="true" :model="addForm" :rules="rules" ref="addForm" size="mini" class="myStyle" label-width="100px"><el-form-item label="角色菜单" prop="roleName"><el-input v-model="addForm.roleName" required placeholder="请输入角色菜单" class="nobr"></el-input></el-form-item><el-form-item label="角色描述"><el-input type="textarea" :rows="2" resize="none" v-model="addForm.roleDesc" placeholder="请输入角色描述" class="nobr"></el-input></el-form-item><el-form-item label="角色菜单"><div v-for="(selectMenu,selectMenuId) in selectMenuArr" :key="selectMenuId" style="padding-left:34px"><el-checkbox :indeterminate="selectMenu.isIndeterminate" v-model="selectMenu.selected" class="selectAll" @change="allCheckboxGroup($event, selectMenu, selectMenu.list)">{{selectMenu.menuName}}</el-checkbox><el-checkbox v-model="menuChild.selected" v-for="(menuChild,menuChildId) in selectMenu.list" :key="menuChildId" @change="checkOneBox(selectMenu, selectMenu.list)">{{menuChild.menuName}}</el-checkbox></div></el-form-item>  
</el-form>
<div slot="footer" class="dialog-footer"><el-button @click="isDialog=false;" class="myStyle" size="mini">取 消</el-button><el-button type="primary" @click="onSubmit(this.openDialogName)" class="myStyle" size="mini">确 定</el-button>
</div>
</el-dialog>isDialog: false,
openDialogName: "",
dialogTitle: "",
selectMenuArr: [],//这个是复选框绑定值
storageArr: [], //暂存数组。selectMenuArr修改过了,但是想要原来没被修改过的数据
menuIdsArr:[], //储存表中的角色菜单(用于修改弹框)可以按需求定义,无影响。不过如果这里没有定义,那么在打开弹框操作时要记得定义。
//因为我们的需求是要判断提交修改结果是否与原来表中的数据相等,所以在这里定义了menuIdsArr

(2)全选复选框,和单个选择复选框的方法:

// 是否全选
allCheckboxGroup(e,preList,sonList){console.log(e , preList, sonList)if( e ){ //这里的e就是一级菜单的selectedif( sonList ){//不论子菜单是否被选中,只要一级菜单被选中,让该子菜单的selected都=true;for(let i = 0 ;i < sonList.length; i++){sonList[i].selected = true;}//因为在选中部分子菜单的情况下,再点击全选按钮。这种情况也能使一级菜单的selected=true,//此时一级菜单的isIndeterminate=true(且这种情况只有 子菜单存在 才能发生)。//但是只要被全选,一级菜单的isIndeterminate就要=false。preList.isIndeterminate = false; }} else {//因为让一级菜单的selected=false只有在全部都被选中的情况下发生,所以一级菜单的isIndetermainate是一直=false的if( sonList ) {for(let i = 0 ;i < sonList.length; i++){sonList[i].selected = false;}}}//要知道,让一级菜单的isIndeterminate=true,都是必须要操作子菜单才能做到的
},//单个选择
checkOneBox(preList,sonList){//tickCount选了的总量,unTickCount没选数量 这里的 e就是当前复选框的selected值var tickCount = 0, unTickCount = 0, len = sonList.lengthfor(let i=0; i<len; i++){if( sonList[i].selected == true) tickCount++;if( sonList[i].selected == false) unTickCount++;}if(tickCount == len){ //选中数量=子级总数,全选preList.selected = true;preList.isIndeterminate = false;} else if ( unTickCount == len ){ //未选中数量=子级总数,未全选preList.selected = false;preList.isIndeterminate = false;} else { //其他情况是不确定状态preList.selected = false;preList.isIndeterminate = true;}
},

(3) 因为我这是在弹框中写的,这里将打开弹框和关闭弹框时的操作贴一下:
我这边的需求是,只要选了子菜单,那么该子菜单的父级菜单(一级菜单)也要被添加。

//打开弹框清空表单,并将数据保存到弹框中的 updateForm 中
openDialog(formName = "addForm", data) {this.$nextTick(() => {if(this.$refs.addForm){this.$refs.addForm.clearValidate();} })for(let key in this.addForm){this.addForm[key]="";}delete this.addForm.id;  this.isDialog = true;this.openDialogName = formName;//selectMenuArr是绑定所有复选框的数据,打开弹框时,让数据恢复成初始值。this.selectMenuArr = JSON.parse(JSON.stringify(this.storageArr)); //深浅拷贝问题if (formName === "addForm") {  this.dialogTitle = '新增角色信息';} else if (formName === "updateForm") {this.dialogTitle = '修改角色信息';let { id, roleName, roleDesc, menuIds } = data; this.addForm = { id, roleName, roleDesc, menuIds };this.menuIdsArr = data.menuIds !="" ? data.menuIds.split(",").map(Number) : []; //将表中的数据存到menuIdsArr中//以下部分是在打开修改弹框时,根据表格中的数据来让复选框对应显示//1. 比较menuIds的值和selectMenuArr中的menuIdfor(let i=0; i<this.selectMenuArr.length;i++){//2. 如果相等,考虑有无子级。if(this.menuIdsArr.indexOf(this.selectMenuArr[i].menuId)>=0){//2.1 有子:可能全选,可能选了一部分。计算该子菜单id和menuIds中相等个数,并将相等的selected=true。let count = 0; if(this.selectMenuArr[i].list){for(let x=0; x<this.selectMenuArr[i].list.length; x++){for(let y=0; y<this.menuIdsArr.length; y++){if( this.selectMenuArr[i].list[x].menuId == this.menuIdsArr[y] ){this.selectMenuArr[i].list[x].selected = true;count++;}}}//3. 判断相等个数是否=子菜单长度,从而判断该子菜单的一级菜单全选状态。if(count == this.selectMenuArr[i].list.length){this.selectMenuArr[i].selected = true;this.selectMenuArr[i].isIndeterminate = false;} else {this.selectMenuArr[i].selected = false;this.selectMenuArr[i].isIndeterminate = true;}} else {   //2.2 无子:selected=true,isIndeterminate=false。           this.selectMenuArr[i].selected = true;this.selectMenuArr[i].isIndeterminate = false;}} //没有相同的部分,就不用管了(原数据的值都是false)}     }
},

打开elementUI弹框这一部分可以看我另一篇博客 elementUI清空弹框中的表单数据

(4)提交数据

//提交查询、添加、修改
onSubmit(formName) {this.$refs.addForm.validate(valid => {if (valid) {this.isDialog = false;//将已经选中的复选框的值处理一下,放到arr中let arr = [];for(let i =0 ;i<this.selectMenuArr.length; i++){if(this.selectMenuArr[i].selected){ //selected=true.有子说明全选,无子说明只有一个菜单且被选中if(this.selectMenuArr[i].list){for(let j=0; j<this.selectMenuArr[i].list.length; j++){arr.push(this.selectMenuArr[i].list[j].menuId);}}arr.push(this.selectMenuArr[i].menuId);} else {if(this.selectMenuArr[i].isIndeterminate){//isIndeterminate=true.说明一定有子,且选了一部分for(let j=0; j<this.selectMenuArr[i].list.length; j++){if(this.selectMenuArr[i].list[j].selected){arr.push(this.selectMenuArr[i].list[j].menuId);}}arr.push(this.selectMenuArr[i].menuId);}}}//添加 if (formName === 'addForm') {   //因为我这边后台要求传字符串,且修改时,要角色菜单为发生变化就传 null。this.addForm.menuIds = arr.length == 0 ? "" : arr.sort(function(a,b){return a-b;}).join();//------添加接口-------}//修改else if (formName === 'updateForm') {//判断角色是否修改,没修改传 null,修改了传字符            this.addForm.menuIds = this.menuIdsArr.sort(function(a,b){return a-b;}).join() == arr.sort(function(a,b){return a-b;}).join() ? null : arr.sort(function(a,b){return a-b;}).join();//------修改接口-------}} else {return false;}});
},

(5)获取复选框的动态数据:

selectRoleMenus(){this.$axios.post("接口").then(res => {this.storageArr = res.list;//因为在选择复选框时会操作到selectMenuArr ,而我们打开添加弹框时需要初始数据,所以将初始数据保留一份。this.selectMenuArr = res.list;     })
}
//记得在created中使用方法。

补充:

1. 比较两个数组是否相等 是否拥有相同元素:

<script type="text/javascript">alert([1,2,3].toString()== [3,2,1].toString());alert([1,2,3].sort(function(a,b){return a-b;}).toString()== [3,2,1].sort(function(a,b){return a-b;}).toString());
</script>

2. 从接口获取的数据 同时赋值给两个变量,改变其中一个变量时,另一个变量的值也会改变:
引用数据类型赋值时只是给变量保存一个指针,指向存储在堆中的对象,所以两个变量实际上是指向的同一个地方。

this.labelListData = JSON.parse(JSON.stringify(this.editLabelList));

解决方法是进行深度复制,因为在拷贝字符串时会开辟新的存储地址,这样就切断了该对象的指针与其指向地址的联系。( 听说如果拷贝对象包含正则表达式,函数,或者undefined等值时,深度烤贝会失效 )

3. 根据某个特定的值删除数组中的指定元素:

var arr = [2,3,5,9,54,21];
arr.splice( arr.indexOf(5), 1 ); //删除数组中的5

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

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

相关文章

WMI in C#[强类型操作]

C# 进行WMI操作的内容封装在System.Management.dll中&#xff0c;具体的在MSDN有详细描述&#xff0c;默认是用[“**’]去读取和设置属性等。 此处介绍一个自动生成强类型的包装软件&#xff0c;这样处理起来就简单了很多&#xff0c;不用在反复的查看参数等信息了。 1、 使用W…

2019年ipa发布苹果应用商店审核指南

https://baijiahao.baidu.com/s?id1623886553597961077&wfrspider&forpc ipa 发布审核指南 说明&#xff1a; 本指南为初版&#xff0c;旨在帮助非技术人员快速了解苹果ipa发布审核流程非技术的审核专员发布审核只需处理 &#xff08;五&#xff09;、iTunes connect …

GridView生成序号

一个经常碰到的情况&#xff1a;GridView需要添加一个序号列&#xff0c;并且从1开始自动编号。而数据库中的ID往往是不连续的&#xff08;会有记录被删除的情况&#xff09;&#xff0c;我们无法绑定现有字段作为编号。因此我们需要手动给GridView编号。 思路&#xff1a;在Gr…

[前端优化]使用Microsoft Ajax Minifier对资源文件进行压缩优化

在前端优化中&#xff0c;js、css等文件的优化一般都是压缩的优化&#xff0c;进行合并、减小体积以达到减小请求的目的。 今天发现了一个集成在VS中的压缩插件&#xff0c;使得压缩变得比较快捷。 配置方法 首先需要去下载Microsoft Ajax Minifier&#xff0c;一路安装就可以&…

手把手教你用 elementUI 实现导航栏

elementUI导航栏官网 1. 安装 elementUI 2. 文件准备 3. 配置路由 4. 导航栏代码 一、安装 elementUI npm i element-ui -S&#xff1b; 在 main.js 中注册组件&#xff1a; import ElementUI from element-ui; import element-ui/lib/theme-chalk/index.css; Vue.use(Elem…

vuex+element 从后台获取数据写导航栏-菜单权限

主要用到 vuex、router.beforeEach、router.addRoutes()。vuex 的使用方法可以看我的另一篇博客&#xff1a;vue笔记&#xff08;四&#xff09;vuex。 顺便安利一个 在线视频转gif图。 因为第一次用到 router.addRoutes()&#xff0c;在做这个需求的时候遇到了很多问题&…

P3393 逃离僵尸岛 最短路dijkstra

题目描述 小a住的国家被僵尸侵略了&#xff01;小a打算逃离到该国唯一的国际空港逃出这个国家。 该国有N个城市&#xff0c;城市之间有道路相连。一共有M条双向道路。保证没有自环和重边。 K个城市已经被僵尸控制了&#xff0c;如果贸然闯入就会被感染TAT...所以不能进入。由其…

JavaFX技巧7:使用CSS颜色常量/派生颜色

在使用FlexCalendarFX时&#xff0c;我不得不定义一组颜色以可视化不同颜色的不同日历的控件。 每个日历不仅提供一种颜色&#xff0c;还提供几种&#xff1a;用于取消选择/选定/悬停状态的背景和文本颜色。 颜色曾在多个地方使用过&#xff0c;但为了简洁起见&#xff0c;我仅…

import() 动态加载component组件失败

在写 vueelement 从后台获取数据写导航栏 时&#xff0c;当我加载动态路由&#xff0c;import() 总是失败。 假设 path: “/views/Home.vue”&#xff0c;name: “Home”。 一、使用 import() 语法加载组件 参考&#xff1a;“Cookysurongbin”的 解决vue动态路由异步加载im…

进入登录页时,用户名输入框自动聚焦、按enter键让密码框聚焦,完整输入信息后登录

让element-ui的输入框聚焦的4种方式 思路&#xff1a;&#xff08;可以跳过这一步看完整代码——完整代码&#xff09; 1. 进入页面时&#xff0c;用户名输入框就要获取焦点&#xff0c;使用 自定义指令 聚焦更方便。当然也可以用 ref 在 mounted() 钩子函数中让输入框聚焦。 …

vue-cli安装步骤

vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装node 条件&#xff1a; node在4.以上&#xff0c;npm在3以上 安装 指令&#xff1a; 1、 npm install -g vue-cli在全局下安装vue-cli # 安装 vue-cli npm install -g vue-cli# 初始化 webpack 项目 vue in…

使用Java编写简单的老虎机游戏

无论游戏多么简单或复杂 &#xff0c;Java都能胜任&#xff01; 在这篇文章中&#xff0c;让我们看一下Java编程的初学者如何制作一个简单而功能齐全的老虎机。 老虎机已经存在很长时间了&#xff0c;但是它的娱乐价值似乎并没有减弱。 InterCasino是第一个在1996年向世界提供…

html笔记(二)html4+css2.0(元素类型、css精灵、宽度自适应、BFC、浏览器相关概述、css统筹)

大标题小节一、元素类型1. 元素分类2. 置换和非置换元素3. 元素类型转换二、css精灵三、宽高自适应1. 宽度自适应2. 高度自适应3. 最小高度自适应4. 高度塌陷及解决办法5. 元素的高度自适应屏幕的高度四、BEC概念应用1. 常见定位方案2. 触发BFC3. BFC特性及应用4. BFC概念五、浏…

25.C# 异步调用Web服务

1.创建Web服务 1.1VS新建ASP.Net空Web应用程序 1.2添加Web服务新建项 1.3添加GetWeather方法和相关类 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Services; using System.EnterpriseServices;namespace WebServ…

css中单位的使用

css中许多的属性都需要添加长度&#xff0c;而长度一般由数字和单位构成&#xff0c;如1px,1.5em,2vh&#xff1b;也可以省略单位&#xff0c;如line-height:1.5,表示行高为字体大小的1.5倍&#xff1b; 长度单位一般也分为相对长度和绝对长度。 &#xff08;一&#xff09;绝…

OSGi:进入微服务架构的门户

在构建可扩展&#xff0c;可靠的分布式系统的背景下&#xff0c;“模块化”和“微服务体系结构”这两个术语如今经常出现。 众所周知&#xff0c;Java平台本身在模块化方面很弱&#xff08; Java 9将通过交付Jigsaw项目来解决这一问题&#xff09;&#xff0c;从而为OSGi和JBos…

html笔记(五)2D、3D、3D动画

大标题小节一、2D1. css3 渐变的语法及应用2. 动画过渡&#xff1a;transition3. 2D转换属性&#xff1a;transform二、3D1. 3D转换2. 3D视距3. 3D翻转方法4. 3D位置移动5. 3D缩放三、3D动画1. keyframes2. 动画属性animation一、2D 1. css3 渐变的语法及应用&#xff1b; &a…

基于上下文的访问控制

拓扑图 配置步骤 1配置端口ip地址&#xff0c;并检测连通性 服务器 ping pc端 服务器 telnet R3 2配置命令 R3(config)# ip access-list extended go R3(config-ext-nacl)# deny ip any any //此ACL目的是隔绝外网流量 R3(config-ext-nacl)# exit R3(config)# interface s0…

使用Gradle将JAR工件发布到Artifactory

因此&#xff0c;我浪费了一两天&#xff08;投资&#xff09;只是为了了解如何使用Gradle将JAR发布到本地运行的Artifactory服务器。 我使用Gradle Artifactory插件进行发布。 我迷失了无穷循环&#xff0c;包括各种版本的各种插件和执行各种任务。 是的&#xff0c;我之前阅读…

Combox使用的一些技巧

这些天做一个小型的CMS&#xff0c;也就几张表&#xff0c;用WCFLINQ2SQLSilverlight这种方式开发的&#xff0c;对最常用的控件如DataGrid,DataForm以及Toolkit里其它一些控件的用法有了一定的了解&#xff0c;同时参照JV9的教程&#xff0c;把Silverlight里的验证机制仔细的学…