本文主要是介绍VUE 实现三级权限选中与全选，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
功能：点击全选时所有子级选中，点击子级时对应的所有父级要选中。
实现思路：通过递归将所有子级转化为一级，选中时将选中的ID存为一个二级数组。循环时判断当前项在选中的数组中存在时即为勾选状态。
1、所有子级选中：通过递归的形式查找所有子级并且将它保存为一个二维数组，只保存ID即可。this.selectList = [{id:1},{id:2}]
2、所有父级选中：选择某个子级时判断是否有父级，有父级则将所有父级选中，这时候就用到我们一开始的树形结构转化的一级所有节点。
具体代码如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>VUE实现三级权限复选框</title><script src="https://cdn.jsdelivr.net/npm/vue@2"></script><style>* {padding: 0px;padding: 0px;}body {font-size: 12px;}</style>
</head><body><div id="app"><div><input type="checkbox" :checked="selectIds.length==allData.length" @change="checkAll"> 全选 </div><div v-for="item in data" :key="item.id"><input type="checkbox" :checked="selectIds.some(res=>res.id==item.id)" @change="toggleCheckbox(item)"><label>{{ item.name }}</label><div style="padding-left:20px;" v-if="item.children"><div v-for="child in item.children" :key="child.id"><input type="checkbox" :checked="selectIds.some(res=>res.id==child.id)" @change="toggleCheckbox(child)"><label>{{ child.name }}</label><div style="display:flex;" v-if="child.children"><div style="margin-left:20px;" v-for="grandChild in child.children" :key="grandChild.id"><input type="checkbox" :checked="selectIds.some(res=>res.id==grandChild.id)" @change="toggleCheckbox(grandChild)"><label>{{ grandChild.name }}</label></div></div></div></div></div></div><script>new Vue({el: '#app',data: {data: [{name: '用户管理',id: 1,parentId: 0,children: [{id: 2,name: '用户列表',parentId: 1,children: [{id: 3,name: '添加',parentId: 2},{id: 4,name: '删除',parentId: 2},{id: 5,name: '禁用',parentId: 2}]},{id: 6,name: '积分列表',parentId: 1,children: [{id: 7,name: '添加',parentId: 6},{id: 8,name: '删除',parentId: 6},]}]},{name: '课程管理',id: 9,parentId: 0,children: [{id: 10,name: '课程列表',parentId: 9,children: [{id: 11,name: '添加',parentId: 10},{id: 12,name: '删除',parentId: 10},{id: 13,name: '禁用',parentId: 10}]},{id: 14,name: '课程订单',parentId: 9,children: [{id: 15,name: '添加',parentId: 14},{id: 16,name: '删除',parentId: 14},]}]}],allData: [],selectIds: [],},mounted() {this.getAlldata(this.data);},methods: {//全部转化为一级getAlldata(arr) {arr.forEach(res => {this.allData.push(res)if (res.children) {this.getAlldata(res.children)}})},//全选checkAll() {let all = this.allData.length == this.selectIds.lengthif (!all) {this.selectIds = this.allData.map(res => { return { id: res.id }; })} else {this.selectIds = []}},//选中toggleCheckbox(item) {let index = this.selectIds.findIndex(res => { return res.id == item.id })let flag = falseif (index == -1) {this.selectIds.push({ id: item.id })flag = true} else {this.selectIds.splice(index, 1)}if (item.children) {this.toggleChildren(item, flag);}if (item.parentId!=0) {this.toggleParents(item.parentId);}},//所有子级选中toggleChildren(item, flag) {item.children.forEach((child, inx) => {if(flag){let index = this.selectIds.findIndex(res=>{ return res.id==child.id})if(index==-1){this.selectIds.push({id:child.id})}}else{this.selectIds.forEach((res,index)=>{if(res.id==child.id){ this.selectIds.splice(index, 1); }})}if (child.children) {this.toggleChildren(child, flag);}});},//选中子级时递归查找父级选中toggleParents(parentId) {let arr = this.allDatafor (let i = 0; i < arr.length; i++) {if (arr[i].id == parentId) {let index = this.selectIds.findIndex(res => { return res.id == arr[i].id })if (index == -1) { this.selectIds.push({ id: arr[i].id }); }if (arr[i].children) {this.toggleParents(arr[i].parentId)}}}},}});</script>
</body></html>这篇关于VUE 实现三级权限选中与全选的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
