<template>
<el-tree
@node-click="handleNodeClick"
:props="props"
:load="loadNode"
lazy
show-checkbox
node-key="id"
ref="tree"
:default-checked-keys="defaultKeys"
>
el-tree>
<script>
// 模拟接口
function getData(id) {
console.log("执行了getData函数")
// 一级菜单
if (id === "000") {
console.log("参数000")
return [
{ id: 1, label: "一级 1", leaf: false },
{ id: 2, label: "一级 2", leaf: false },
{ id: 3, label: "一级 3", leaf: false },
]
}
// 二级菜单
if (id === 1) {
return [
{ id: 11, label: "二级 1-1", leaf: true },
{ id: 12, label: "二级 1-2", leaf: true },
{ id: 13, label: "二级 1-3", leaf: true },
]
}
if (id === 2) {
return [
{ id: 21, label: "二级 2-1", leaf: true },
{ id: 22, label: "二级 2-2", leaf: true },
{ id: 23, label: "二级 2-3", leaf: true },
]
}
if (id === 3) {
return [
{ id: 31, label: "二级 3-1", leaf: true },
{ id: 32, label: "二级 3-2", leaf: true },
{ id: 33, label: "二级 3-3", leaf: true },
]
}
}
export default {
data() {
return {
props: {
label: "label",
children: "zones",
isLeaf: "leaf",
},
defaultKeys: [31, 32],
}
},
methods: {
loadNode(node, resolve) {
console.log(node)
// 第一次加载时,手动设置一下最顶级的菜单数据
if (node.level === 0) {
console.log("一一一级设置完成")
return resolve([{ id: "000", label: "一一一级", leaf: false }])
}
// 之后每次点击展开,判断当前的节点是不是叶子节点,如果不是,就拿着当前被点击的id,去请求它的子节点
if (node.data.leaf === false) {
return resolve(getData(node.data.id))
}
// 如果是叶子节点,直接会退出,而且不会有下拉三角
},
handleNodeClick(data) {
console.log(data)
},
},
mounted() {},
}
script>
想知道这个怎么解决
你的代码我拿过来运行,展开一级3的时候,一级3属于半选中状态,二级3-3并未选中
出现展开当前节点其子节点被选中的问题一般是由于节点的id重复导致的。
你看你获取子节点数据的方法返回的数据节点是不是和上层的节点有重复的呢?关于树,节点一定要保证它的唯一性!!!
关于选中时拿到所有被选中节点的id:官网有提供getCheckedNodes方法,只要在节点被选中时触发,拿到的就是已被勾选的节点id组