vue+elementUI三级复选框 checkbox （角色管理）

话不多说直接上代码，直接复制新页面运行就ok，有问题大佬们请留言一起讨论，
效果图

代码如下

<template><el-scrollbar style="height: 90%"><div class="menuList"><el-row style="margin-top: 20px"><div class="menuList-table"><!-- 总全选--><el-checkbox:indeterminate="indeterminate"v-model="isCheckAll"@change="checkAll">全选</el-checkbox><!--这里使用element-ui 的折叠板--><el-collapse><el-collapse-itemv-for="(one, oneIndex) in menuData":key="oneIndex"><template slot="title"><!-- 一级 权限列表--><el-checkbox:indeterminate="one.indeterminate"v-model="one.checked"@change="checkedOneAll(oneIndex, one.id, $event)":key="oneIndex">{{ one.name }}</el-checkbox></template><!-- 二级 权限列表--><el-checkboxv-for="(two, twoIndex) in one.children"v-model="two.checked"@change="checkedTwoAll(oneIndex, twoIndex, two.id, one.id, $event)":indeterminate="two.indeterminate":key="twoIndex">{{ two.name }}<div style="position: absolute" v-if="two.children.length > 0"><el-checkboxstyle="display: block; line-height: 2"v-for="(three, threeIndex) in two.children":key="threeIndex"v-model="three.checked":title="three.name"@change="checkedThreeAll(oneIndex,twoIndex,threeIndex,three.id,two.id,$event)">{{ three.name | filterName }}</el-checkbox></div></el-checkbox></el-collapse-item></el-collapse></div></el-row></div></el-scrollbar>
</template>
<script>
export default {name: "menuList",components: {},props: {},data() {return {menuData: [{id: 73,name: "地图",children: [{id: 35,name: "实时态势",children: [],checked: false,},{id: 69,name: "实时态势",children: [],checked: false,},{id: 68,name: "统计图",children: [],checked: false,},{id: 21,name: "禁飞区列表",children: [],checked: false,},{id: 22,name: "禁飞区添加",children: [],checked: false,},],checked: false,},{id: 74,name: "设备",children: [{id: 2,name: "无人机列表",children: [],checked: false,},{id: 79,name: "警用无人机列表",children: [{id: 108,name: "进入警用无人机修改页面",children: [],checked: false,},{id: 111,name: "警用无人机修改操作",children: [],checked: false,},{id: 110,name: "进入警用无人机详情页面",children: [],checked: false,},{id: 151,name: "警用无人机删除",children: [],checked: false,},{id: 109,name: "进入警用无人机添加页面",children: [],checked: false,},],checked: false,},{id: 66,name: "定位器列表",children: [],checked: false,},{id: 30,name: "无人机厂商列表",children: [],checked: false,},{id: 3,name: "添加无人机",children: [],checked: false,},{id: 67,name: "新增定位器",children: [],checked: false,},],checked: false,},{id: 75,name: "人员",children: [{id: 59,name: "持有者列表",children: [],checked: false,},{id: 172,name: "新增持有者",children: [],checked: false,},{id: 178,name: "待审核名单",children: [],checked: false,},{id: 192,name: "历史用户日志",children: [],checked: false,},{id: 175,name: "任务小组列表",children: [],checked: false,},],checked: false,},{id: 76,name: "报批",children: [{id: 7,name: "飞行计划列表",children: [],checked: false,},{id: 8,name: "飞行计划/报备",children: [],checked: false,},],checked: false,},{id: 80,name: "权限",children: [{id: 141,name: "警员权限管理",children: [{id: 142,name: "新增子权限组",children: [],checked: false,},],checked: false,},{id: 190,name: "警员访问权限",children: [],checked: false,},{id: 193,name: "模块访问权限",children: [],checked: false,},{id: 81,name: "权限组列表",children: [{id: 85,name: "新增权限组",children: [],checked: false,},{id: 88,name: "查看用户列表",children: [],checked: false,},{id: 87,name: "查看菜单列表",children: [],checked: false,},{id: 86,name: "删除权限组",children: [],checked: false,},],checked: false,},],checked: false,},],isCheckAll: false, //一级全选状态indeterminate: false,};},computed: {},methods: {//总change事件checkAll(e) {this.ischeckAll = e;console.log('eeeeeeeeeeeee',e);if (e === true) {this.indeterminate = false;for (var i = 0, len = this.menuData.length; i < len; i++) {//二级全选反选不确定this.menuData[i].checked = e;this.menuData[i].indeterminate = false;for (var j = 0, len1 = this.menuData[i].children.length;j < len1;j++) {this.menuData[i].children[j].checked = e;for (var k = 0, len2 = this.menuData[i].children[j].children.length;k < len2;k++) {this.menuData[i].children[j].children[k].checked = e;}}}} else {this.indeterminate = false;for (let i = 0, len = this.menuData.length; i < len; i++) {//三级全选反选不确定this.menuData[i].checked = e;this.menuData[i].indeterminate = false;for (let j = 0, len1 = this.menuData[i].children.length;j < len1;j++) {this.menuData[i].children[j].checked = e;for (let k = 0, len2 = this.menuData[i].children[j].children.length;k < len2;k++) {this.menuData[i].children[j].children[k].checked = e;}}}}},//一级change事件checkedOneAll(oneIndex, oneId, e) {this.menuData[oneIndex].checked = e; //一级勾选后，子级全部勾选或者取消if (e === true) {//去掉一级不确定状态this.menuData[oneIndex].indeterminate = false;}let childrenArray = this.menuData[oneIndex].children;if (childrenArray.length > 0) {childrenArray.forEach((oneItem) => {oneItem.checked = e;if (oneItem.children.length > 0) {oneItem.children.forEach((twoItem) => {twoItem.checked = e;});}});}this.getIsCheckAll();},//二级change事件checkedTwoAll(oneIndex, twoIndex, twoId, oneId, e) {var childrenArray = this.menuData[oneIndex].children;var tickCount = 0,unTickCount = 0,len = childrenArray.length;for (var i = 0; i < len; i++) {if (twoId === childrenArray[i].id) childrenArray[i].checked = e;if (childrenArray[i].checked === true) tickCount++;if (childrenArray[i].checked === false) unTickCount++;}//判断二级下面是否还有三级，点击选择二级(选择与不选）时候下面三级是全选还是全不选if (childrenArray[twoIndex].children.length > 0) {childrenArray[twoIndex].children.forEach((threeItem) => {threeItem.checked = e;});//判断二级是否选中childrenArray[twoIndex].checked = e;if (e === true) {childrenArray[twoIndex].indeterminate = false;}}if (tickCount === len) {//二级全勾选this.menuData[oneIndex].checked = e;this.menuData[oneIndex].indeterminate = false;} else if (unTickCount === len) {//二级全不勾选this.menuData[oneIndex].checked = e;this.menuData[oneIndex].indeterminate = false;} else {this.menuData[oneIndex].checked = e;this.menuData[oneIndex].indeterminate = true; //添加一级不确定状态}this.getIsCheckAll();},//三级change事件checkedThreeAll(oneIndex, twoIndex, threeIndex, threeId, twoId, e) {let childrenArray = this.menuData[oneIndex].children[twoIndex].children;let tickCount = 0,unTickCount = 0,len = childrenArray.length;for (let i = 0; i < len; i++) {if (threeId === childrenArray[i].id) childrenArray[i].checked = e;if (childrenArray[i].checked === true) tickCount++;if (childrenArray[i].checked === false) unTickCount++;}if (tickCount === len) {//三级全勾选this.menuData[oneIndex].children[twoIndex].checked = true;this.menuData[oneIndex].children[twoIndex].indeterminate = false;this.menuData[oneIndex].checked = true;this.menuData[oneIndex].indeterminate = false; //添加二级不确定状态} else if (unTickCount === len) {//三级全不勾选this.menuData[oneIndex].children[twoIndex].checked = false;this.menuData[oneIndex].children[twoIndex].indeterminate = false;this.menuData[oneIndex].checked = false;this.menuData[oneIndex].indeterminate = true; //添加二级不确定状态this.isCheckAll = false;this.indeterminate = true;} else if (tickCount !== len) {//三级勾选几个this.menuData[oneIndex].children[twoIndex].checked = e;this.menuData[oneIndex].children[twoIndex].indeterminate = true;this.menuData[oneIndex].checked = false;this.menuData[oneIndex].indeterminate = true; //添加二级不确定状态this.isCheckAll = false;this.indeterminate = true;}this.getIsCheckAll();},/***是否全选*/getIsCheckAll() {var tickCount = 0,unTickCount = 0,ArrLength = this.menuData.length;for (var j = 0; j < ArrLength; j++) {//全选checkbox状态if (this.menuData[j].checked === true) tickCount++;if (this.menuData[j].checked === false) unTickCount++;}if (tickCount === ArrLength) {//二级全勾选this.isCheckAll = true;this.indeterminate = false;} else if (unTickCount === ArrLength) {//二级全不勾选this.isCheckAll = false;this.indeterminate = false;} else {this.isCheckAll = false;this.indeterminate = true; //添加一级不确定状态}},/*** 获取列表数据**/getList() {this.menuData.forEach((oneItem, oneIndex) => {console.log('+++++',oneIndex);if (oneItem.children.length > 0) {let oneCountNum = oneItem.children.length;let isOneCheckedNum = 0;oneItem.children.forEach((twoItem) => {if (twoItem.checked) {isOneCheckedNum += 1;}if (twoItem.children.length > 0) {let twoCountNum = twoItem.children.length;let isTwoCheckedNum = 0;twoItem.children.forEach((three) => {if (three.checked) {isTwoCheckedNum += 1;}});twoItem.checked = isTwoCheckedNum === twoCountNum;twoItem.indeterminate =isTwoCheckedNum > 0 && isTwoCheckedNum < twoCountNum;}});oneItem.checked = isOneCheckedNum === oneCountNum;oneItem.indeterminate =isOneCheckedNum > 0 && isOneCheckedNum < oneCountNum;}});},},created() {this.getList();},watch: {},filters: {filterName(value) {return value.substring(0, 5) + "...";},},
};
</script>
<style lang="less" scoped>
/deep/ .el-collapse-item__content {padding-bottom: 0;min-height: 200px;font-size: 33px;margin-left: 2%;
}
/deep/.el-checkbox {margin-right: 60px !important;
}
</style>

vue+elementUI三级复选框 checkbox （角色管理）相关推荐

vue elementui table 复选框
1.el-table 中加入事件@selection-change="handleSelectionChange" <el-table-column type=" ...
bootstrap带有下拉按钮的输入框_关于bootstrap--表单（下拉select、输入框input、文本域textare复选框checkbox和单选按钮radio）...
html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明.通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性 ...
jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
jQuery操作复选框checkbox技巧总结 --- 设置选中.取消选中.获取被选中的值.判断是否选中等一.checked属性定义先了解下input标签的checked属性: 1.HTML &l ...
使用CSS3美化复选框checkbox
我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那么本文将结合实例带您一起了解一下使用CSS3将复选框checkbox进行样式美化,并且带上超酷的滑动 ...
html5复选框样式,11种炫酷CSS3复选框checkbox样式美化效果
这是一款效果非常酷的CSS3复选框checkbox样式美化效果.该复选框美化效果共有11种.默认的复选框的样式十分不好看,该效果将复选框加一美化,带上了一些动画效果,其中一些制作为滑动按钮的样式. 使 ...
使用easyui框架form控件，单选按钮radio或复选框checkbox样式问题
为什么80%的码农都做不了架构师?>>> easyui只提供了textbox文本框,未提供单选按钮radio或复选框checkbox控件,在使用过程中,会存在单选按钮radio ...
MFC复选框CheckBox使用 ++
MFC中复选框checkbox控件,至少有四种方法对其进行操作, 第一种是利用Cbutton成员函数GetCheck和SetCheck, 第二种是利用CWnd成员函数IsDlgButtonChecke ...
MFC复选框CheckBox使用
MFC中复选框checkbox控件,至少有三种方法对其进行操作,他们是利用Cbutton成员函数GetCheck和SetCheck,第二种是利用CWnd成员函数IsDlgButtonChecked,最 ...
flutter 开关Switch与复选框Checkbox
Flutter 移动跨平台开发技术分享目前在西瓜视频上免费刊登 Flutter 系列教程,每日更新,欢迎关注接收提醒 [x1]点击查看提示 [x2]各种系列的教程 [x3]Flutter文章积累目录 ...

vue+elementUI三级复选框 checkbox （角色管理）

代码如下

vue+elementUI三级复选框 checkbox （角色管理）相关推荐

最新文章

热门文章