vue3 在表单中使用el-tree组件 第一次使用树控件,遇到了奇怪的问题:
<el-form-item label="功能+ ':'" class="required" prop="funcIdList">
<div class="versionFunTree">
<el-tree ref="FuncTree" :data="versionFun" show-checkbox node-key="id" @check-change="handleCheckChange" @node-click="handleNodeClick"></el-tree>
</div>
</el-form-item>
方法:这里node-click绑定的handleNodeClick 不生效 没有打印任何信息
const handleNodeClick = (data, e) => {
console.log(data)
console.log(e)
const checkedNodes = FuncTree.value.getCheckedNodes(false, true)
const currentNode = e.node
const siblings = currentNode.node.parent.data.children
siblings.forEach(node => {
if (node !== currentNode.node) {
node.disabled = true
}
})
}
const handleCheckChange = (checkedKeys, e) => {
console.log(checkedKeys)
console.log(e, 'e')
}
因为渲染数据有2-3层 其中有一个需求是要求对第三层存在多个选项的子功能项做一个操作 当点击最里层(即第三层)的某一复选框勾选上了任意子功能项 同一层的其他功能项需要保持禁用状态 不可勾选