在 el-tree
中,可以通过 props
属性中的 highlight-current
和 current-node-key
来设置当前节点。当 highlight-current
为 true
时,会高亮显示当前选中节点并将其添加到 current-node-key
中;而当 current-node-key
的值与某个节点的 node-key
相同时,该节点就被视为当前选中节点,从而可以通过 is-current
属性来高亮显示该节点。因此,要设置节点的 isCurrent
,需要做以下两个步骤:
- 设置
highlight-current
和current-node-key
属性
首先,在 el-tree
中设置 highlight-current
为 true
并将需要高亮显示的节点的 node-key
值设置为 current-node-key
。
<template>
<el-tree :data="treeData" :props="{ 'highlight-current': true, 'current-node-key': currentNodeKey }"></el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [
{
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'
}
]
}
]
}
],
currentNodeKey: 3 // 设置当前节点的 `node-key` 值为 3
};
}
};
</script>
在上面的代码中,我们将 highlight-current
设置为 true
,并将需要高亮显示节点的 node-key
值设置为 currentNodeKey
(这里设置的是 3
),用于标识当前选中节点。
- 设置节点的
is-current
属性
然后,在需要高亮显示的节点上设置 is-current
属性即可。如下所示:
<template>
<el-tree :data="treeData" :props="{ 'highlight-current': true, 'current-node-key': currentNodeKey }">
<span slot-scope="{ node }" :class="{ 'is-current': node.isCurrent }">{{ node.label }}</span>
</el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [
{
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'
}
]
}
]
}
],
currentNodeKey: 3 // 设置当前节点的 `node-key` 值为 3
};
}
};
</script>
在上面的代码中,我们使用了 slot-scope
来获取 el-tree-node
的 node
对象,然后根据 is-current
属性来决定是否添加 is-current
类,从而实现高亮显示当前选中节点。
总之,要设置节点的 isCurrent
,需要将需要高亮显示的节点的 node-key
值设置为 current-node-key
,并在该节点上设置 is-current
属性。