vue3 el-tree默认选中并高亮某一行

先上截图

其实就是先设置highlight-current 为true

原理是element ui的树形控件支持setCurrentKey()方法，只需要将你要设置的节点的key值设置进去就可以了

下面上代码

<template>
  <el-tree ref="myTree" highlight-current node-key="id"
    :data="treeData"
    :props="defaultProps"
    @node-click="handleNodeClick"
  />
</template>

<script lang="ts" setup>
interface Tree {
  label: string
  children?: Tree[]
}

// 节点点击事件
const handleNodeClick = (data: Tree) => {
  console.log(data)
}
// 树的配置键值
const defaultProps = {
  children: 'children',
  label: 'label',
}

const myTree = ref(null) // el-tree的ref
const treeData = ref([]) // 数据这一部分省略 这个不重要
onMounted(() => {
    handleNodeClick(treeData.value[0]) // 执行点击事件 也就是执行选中
    nextTick(() => {
        myTree.value.setCurrentKey(treeData.value[0].id) // 利用el-tree的setCurrentKey方法高亮
    })   
})
</script>