vue3的elementPlus tree 默认高亮并选中第一行

实现效果 如下

代码如下：

<el-tree :data="deviceTreeData" ref="treeRef" node-key="id" @node-click="onNodeClick" icon-class="el-icon-arrow-right" :default-expanded-keys="['1']">
     <template #default="{ node, data }">
         <span :title="node.label" class="tree-node-label-ellipsis">
               {{ node.label }}
          </span>
     </template>
</el-tree>

<script setup lang="ts">

const defaultProps = {
  children: 'children',
  label: 'label'
};

const selectTableConfig = ref({});
const treeRef = ref(null);

const getLeftMenuList = () => {
    apiGetLefMenu().then((res: any) => {
        // 获取左侧菜单数据
        // leftMenuList.value = data;
        console.log(res, "这是左侧菜单");
        let resData: Array<Object> = res.data
        let hlist: any = []
        if (res.status == 200) {
            // 处理左侧菜单数据，将获取的数据与初始数据进行对比，并添加到新数组中
            deviceTreeData.value[0].children.forEach((child: any) => {
                resData.forEach((resdataItem: any) => {
                    if (child.id == resdataItem.code) {
                        console.log({ ...child, ...resdataItem, });
                        hlist.push({
                            ...child,
                            ...resdataItem,
                        })
                    }
                })
            });
            deviceTreeData.value[0].children = hlist
        }
        // 默认显示 第一级第一个  赋值 node-key="id" 给绑定的值 重要代码如下 
        nextTick(()=>{
            selectTableConfig.value = deviceTreeData.value[0].children[0]
            treeRef.value.setCurrentKey(deviceTreeData.value[0].children[0].id,true); //  当节点被点击时，更新currentNodeKey的值
        })

    })

};

// 生命周期 开始

onMounted(() => {
    getLeftMenuList()
})

// 生命周期 结束
</script>