Element Plus中el-tree组件默认选中第一个节点的实现方法
-
- [使用setCurrentKey API（推荐）](#使用setCurrentKey API（推荐）)
- DOM操作模拟点击（兼容旧版）
- 方法对比
使用setCurrentKey API（推荐）
在Element Plus的el-tree组件中，实现默认选中第一个节点是常见的交互需求。本文将详细介绍两种实现方法，帮助开发者快速掌握相关技术要点。
setCurrentKey是Element Plus提供的官方API，通过设置当前节点的key值实现选中效果。该方法需要配合highlight-current属性和node-key使用。
cpp
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>el-tree默认选中</title>
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/element-plus"></script>
</head>
<body>
<div id="app">
<el-tree
ref="treeRef"
:data="treeData"
node-key="id"
:props="defaultProps"
highlight-current
@node-click="handleNodeClick"
></el-tree>
</div>
<script>
const { createApp, ref, onMounted } = Vue;
const { ElTree } = ElementPlus;
createApp({
setup() {
const treeRef = ref(null);
const treeData = ref([
{
id: 1,
label: '一级节点 1',
children: [
{ id: 4, label: '二级节点 1-1' },
{ id: 5, label: '二级节点 1-2' }
]
},
{ id: 2, label: '一级节点 2' },
{ id: 3, label: '一级节点 3' }
]);
const defaultProps = {
children: 'children',
label: 'label'
};
const handleNodeClick = (data) => {
console.log('节点点击:', data);
};
onMounted(() => {
// 默认选中第一个节点
if (treeData.value.length > 0) {
treeRef.value.setCurrentKey(treeData.value[0].id);
}
});
return {
treeRef,
treeData,
defaultProps,
handleNodeClick
};
}
}).use(ElementPlus).mount('#app');
</script>
</body>
</html>关键点说明
- 必须设置node-key属性，指定节点唯一标识字段
- 需要添加highlight-current属性以高亮显示当前选中节点
- 操作时机应在组件挂载完成后（onMounted生命周期）
DOM操作模拟点击（兼容旧版）
对于特殊场景或旧版本兼容，可通过DOM操作模拟点击第一个节点实现选中效果。
cpp
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>el-tree默认选中(兼容版)</title>
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/element-plus"></script>
</head>
<body>
<div id="app">
<el-tree
:data="treeData"
node-key="id"
:props="defaultProps"
:default-expanded-keys="expandedKeys"
@node-click="handleNodeClick"
></el-tree>
</div>
<script>
const { createApp, ref, watch, nextTick } = Vue;
createApp({
setup() {
const treeData = ref([
{
id: 1,
label: '一级节点 1',
children: [
{ id: 4, label: '二级节点 1-1' },
{ id: 5, label: '二级节点 1-2' }
]
},
{ id: 2, label: '一级节点 2' },
{ id: 3, label: '一级节点 3' }
]);
const expandedKeys = ref([]);
const defaultProps = {
children: 'children',
label: 'label'
};
const handleNodeClick = (data) => {
console.log('节点点击:', data);
};
// 设置默认展开第一个节点
if (treeData.value.length > 0) {
expandedKeys.value = [treeData.value[0].id];
}
// 监听数据变化后模拟点击
watch(treeData, () => {
nextTick(() => {
const firstNode = document.querySelector('.el-tree-node__content');
if (firstNode) firstNode.click();
});
}, { immediate: true });
return {
treeData,
expandedKeys,
defaultProps,
handleNodeClick
};
}
}).use(ElementPlus).mount('#app');
</script>
</body>
</html>注意事项
- 需配合
default-expanded-keys确保第一个节点可见 - 操作时机应在DOM更新完成后（
nextTick） - 性能影响较大，不推荐常规使用
方法对比
