el-tree只有最后一级可以选中
在Element UI的el-tree
组件中,如果你想要实现只有最后一级节点可以被选中,你可以通过监听节点点击事件并在事件处理函数中实现逻辑来控制节点的选中状态。
以下是一个简单的示例代码:
<template>
<el-tree
:data="treeData"
:props="defaultProps"
@node-click="handleNodeClick"
ref="tree"
>
</el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [
// ... 树形结构的数据
],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
handleNodeClick(data, node, self) {
// 如果当前节点有子节点,则不允许选中
if (data.children && data.children.length > 0) {
this.$refs.tree.setCurrentKey(null);
} else {
// 否则允许选中
this.$refs.tree.setCurrentKey(node.key);
}
}
}
};
</script>
在这个示例中,当你点击树节点时,handleNodeClick
事件处理函数会被触发。如果被点击的节点有子节点,则取消其选中状态;如果没有子节点,则允许其被选中。这样就实现了只有最后一级节点可以被选中的需求。
评论已关闭