vue3 el-tree中设置和取消选中树节点高亮
el-tree,高亮,取消高亮
·
treeRef.value.setCurrentKey(val)
val:为树上一个节点的值时为设置选中该节点,为该节点设置高亮
treeRef.value.setCurrentKey(null)
null时为取消选中该节点,实测空字符串不能取消选中高亮
完整代码
<script setup lang="ts" >
import type { ElTree } from 'element-plus'
interface Tree {
id: number
label: string
children?: Tree[]
}
const treeRef = ref<InstanceType<typeof ElTree>>()
const currentnode = ref(1) // 默认选中第一个节点
watch(currentnode, (val) => {
treeRef.value.setCurrentKey(val)
})
const NodeClick = async(node: any, TreeNode: Node, e) => {
currentnode.value = node.id
}
const data: Tree[] = [
{
id: 1,
label: 'Level one 1',
children: [
{
id: 4,
label: 'Level two 1-1',
children: [
{
id: 9,
label: 'Level three 1-1-1',
},
{
id: 10,
label: 'Level three 1-1-2',
},
],
},
],
},
{
id: 2,
label: 'Level one 2',
children: [
{
id: 5,
label: 'Level two 2-1',
},
{
id: 6,
label: 'Level two 2-2',
},
],
},
{
id: 3,
label: 'Level one 3',
children: [
{
id: 7,
label: 'Level two 3-1',
},
{
id: 8,
label: 'Level two 3-2',
},
],
},
]
</script>
<template>
<el-tree
ref="treeRef"
:current-node-key="currentnode"
:highlight-current="true"
node-key="id"
:data="data"
@node-click="NodeClick"
/>
<el-buttom @click="currentnode=null">
取消高亮
</el-buttom>
</template>
更多推荐
已为社区贡献3条内容
所有评论(0)