vue3 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>