基于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>
