element tree 设置current-node-key无效

基于vue3+elementPlus+TS

需求：点击右侧的部门名称，左侧部门树对应选中的节点--高亮

image.png

需要设置node-key，ref，current-node-key
且写在nextTick 里（必须等待dom渲染完毕后再执行）

重点设置setCurrentKey，否则样式不会高亮
传的值就是current-node-key绑定的值

image.png

<el-tree
   ref="treeRef"
   :highlight-current="true"
   :expand-on-click-node="false"
   :data="departmentList"
   :props="defaultProps"
   node-key="id"
   :current-node-key="selectId"
   @node-click="handleNodeClick"
></el-tree>

<script lang='ts'>
import { defineComponent, ref, nextTick } from 'vue';
interface ITrees{
  name: string;
  id: string;
}
export default defineComponent({
  const treeRef = ref<any>(null);
  const selectId = ref<string>('');
  const departmentList = ref<ITrees[]>([]);
  // 点击部门树的回调
  const handleNodeClick = async (val: ITrees) => {
    try {
        await nextTick();
        selectId.value = val.id;
        console.log('selectId', selectId.value);
        await treeRef.value?.setCurrentKey(selectId.value); // 重点代码
    } catch (e) {
      console.log(e);
    }
  };
return {
    handleNodeClick,
    treeRef,
    selectId,
    departmentList,
};
</script>