el-tree设置默认选中
时间: 2025-03-12 19:12:38 浏览: 54
### 设置 Element UI `el-tree` 组件默认选中项
为了使 `el-tree` 组件中的某些节点默认被选中,可以使用 `default-checked-keys` 属性。此属性接收一个数组,其中包含要默认选中的节点的键值。
下面是一个完整的配置示例:
```html
<template>
<div>
<el-tree
:data="treeData"
show-checkbox
node-key="id"
:default-checked-keys="checkedKeys"
ref="tree">
</el-tree>
</div>
</template>
<script>
export default {
data() {
return {
treeData: [
{
id: 1,
label: 'Level one 1',
children: [{
id: 4,
label: 'Level two 1-1'
}]
},
{
id: 2,
label: 'Level one 2',
children: [{
id: 5,
label: 'Level two 2-1'
}, {
id: 6,
label: 'Level two 2-2'
}]
}
],
checkedKeys: [1, 4] // 这里定义了哪些节点应该默认被选中
};
}
};
</script>
```
通过上述代码片段可以看出,默认情况下 ID 为 1 和 4 的两个节点会被自动勾选[^1]。
此外,在脚本部分还可以动态修改已选中的状态。例如,当页面加载完成后或者响应某个事件时更新 `checkedKeys` 数组即可改变当前的选择状况。
对于更复杂的场景下如果需要获取最新的选中情况,则可以通过调用 `$refs.tree.getCheckedNodes()` 或者监听 `check-change` 事件来处理逻辑变化。
阅读全文
相关推荐


















