在做角色权限配置这块,用element-UI中的tree组件来做。想选中单个页面,或者单个页面的某个具体按钮,就能把所有父级菜单勾选。原生配置项并没有这种玩法,百度搜索也没有具体写法,这里分享一下我的做法。上代码
<el-tree :data="treeData" node-key="id" :check-strictly="true" ref="tree" :show-checkbox="true" @check="checkeTree"></el-tree>
methods: {initForm (data) {this.treeData = [{id: 1,label: '一级 1',children: [{id: 4,label: '二级 1-1',children: [{id: 9,label: '三级 1-1-1'}, {id: 10,label: '三级 1-1-2'}]}]}, {id: 2,label: '一级 2',children: [{id: 5,label: '二级 2-1'}, {id: 6,label: '二级 2-2'}]}, {id: 3,label: '一级 3',children: [{id: 7,label: '二级 3-1'}, {id: 8,label: '二级 3-2'}]}]},// 选中子节点,默认选中父节点checkeTree (data) {let thisNode = this.$refs.tree.getNode(data.id) // 获取当前节点const keys = this.$refs.tree.getCheckedKeys() // 获取已勾选节点的key值if (thisNode.checked) { // 当前节点若被选中for (let i = thisNode.level; i > 1; i--) { // 判断是否有父级节点if (!thisNode.parent.checked) { // 父级节点未被选中,则将父节点替换成当前节点,往上继续查询,并将此节点key存入keys数组thisNode = thisNode.parentkeys.push(thisNode.data.id)}}}this.$refs.tree.setCheckedKeys(keys) // 将所有keys数组的节点全选中},cancel () {this.$refs.tree.setCheckedKeys([1, 4, 2])console.log(this.$refs.tree.getHalfCheckedKeys())// this.$emit('dialogSwitch')}}