代码:el-tree实现菜单,每级菜单都有4个复选框,分别是管理查看下载编辑四个权限,每个复选框都可以控制下级菜单的复选框
时间: 2024-03-06 21:50:10 浏览: 58
vue基于element-ui的三级CheckBox复选框功能的实现代码
以下是一个简单的示例代码,用于el-tree实现菜单,并控制复选框的选中状态:
```html
<template>
<el-tree :data="data" :props="defaultProps" node-key="id" @node-click="handleNodeClick"></el-tree>
</template>
<script>
export default {
data() {
return {
data: [{
id: 1,
label: '菜单1',
children: [{
id: 2,
label: '菜单1-1',
children: [{
id: 3,
label: '菜单1-1-1'
}, {
id: 4,
label: '菜单1-1-2'
}]
}, {
id: 5,
label: '菜单1-2',
children: [{
id: 6,
label: '菜单1-2-1'
}, {
id: 7,
label: '菜单1-2-2'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label',
isLeaf: 'isLeaf'
}
}
},
methods: {
handleNodeClick(data, node, instance) {
this.updateChildNodeStatus(data, node.checked)
this.updateParentNodeStatus(instance.parent, node.checked)
},
updateChildNodeStatus(node, checked) {
if (node.children) {
node.children.forEach(child => {
child.checked = checked
this.updateChildNodeStatus(child, checked)
})
}
},
updateParentNodeStatus(node, checked) {
if (node) {
const children = node.childNodes
const len = children.length
let allChecked = true
let someChecked = false
children.forEach(child => {
if (!child.checked) {
allChecked = false
} else {
someChecked = true
}
})
if (allChecked) {
node.checked = true
node.indeterminate = false
} else if (someChecked) {
node.checked = false
node.indeterminate = true
} else {
node.checked = false
node.indeterminate = false
}
this.updateParentNodeStatus(node.parent, checked)
}
}
}
}
</script>
```
在上面的代码中,我们定义了一个el-tree,并且给每个节点添加了一个`checked`属性,用于表示复选框的选中状态。同时,我们通过`node-click`事件来处理节点的点击事件,并在方法中递归调用子节点和父节点,来更新复选框的选中状态。
在节点的点击事件中,我们首先更新当前节点的选中状态,并递归调用子节点的选中状态。然后,我们再递归调用父节点的选中状态,并根据子节点的选中情况来更新父节点的选中状态。
通过以上的代码,我们可以实现el-tree中每级菜单都有4个复选框,并且每个复选框都可以控制下级菜单的复选框。
阅读全文