el-tree默认选中

el-tree组件默认选中节点的实现可以通过设置组件的default-checked-keys属性来实现。这个属性是一个数组，可以指定初始时需要默认选中的节点的key值。当组件渲染时，会自动将对应key值的节点设置为选中状态。具体的实现代码如下所示:

<template>
<el-tree
:data="treeData"
:default-checked-keys="defaultCheckedKeys"
:props="treeProps">
</el-tree>
</template>

<script>
export default {
data() {
return {
treeData: [
{
id: 1,
label: 'Node 1',
children: [
{
id: 11,
label: 'Node 1-1'
},
{
id: 12,
label: 'Node 1-2'
}
]
},
{
id: 2,
label: 'Node 2'
}
],
defaultCheckedKeys: [11] // 设置默认选中节点的key值
}
},
computed: {
treeProps() {
return {
children: 'children', // 设置children字段的属性名
label: 'label' // 设置label字段的属性名
}
}
}
}
</script>

在上述代码中，我们通过设置defaultCheckedKeys属性，将需要默认选中的节点的key值传递给el-tree组件。这样，在组件渲染时，节点11就会被默认选中。你可以根据需要将defaultCheckedKeys属性设置为一个包含多个节点key值的数组来实现默认选中多个节点的功能。<span class="em">1</span>
#### 引用[.reference_title]
- *1* [vue el-tree 默认展开第一个节点的实现代码](https://download.csdn.net/download/weixin_38725450/12925996)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]