首页el-tree 默认选中第一个节点

el-tree 默认选中第一个节点

时间: 2023-08-16 20:14:34 浏览: 113

vue el-tree 默认展开第一个节点的实现代码

5星 · 资源好评率100%

vue 的树形控件 el-tree 可以用来方便地实现树形控件，但是官方文档中，关于控件的默认展开只有默认展开全部或者默认全部关闭，如下所示：对于指定节点的展开，需要指定其id，从而通过 default-expanded-keys 设置默认展开的节点。对于后台返回的数据，默认展开其第一层的第一个，其实很简单：对于获取到的后台数据，将其第一层节点添加到数组中，将 default-expanded-keys 绑定数组，从而设置默认展开的节点。实际应用：默认展开第一层节点中的第一个节点： <template> <section>  <el-row

你可以通过设置 `default-expand-all` 和 `default-checked-keys` 属性来实现 el-tree 默认选中第一个节点的效果。设置 `default-expand-all` 为 `true` 可以展开所有节点，默认情况下，el-tree 所有节点都是折叠的。 ```html <el-tree :data="treeData" :default-expand-all="true"></el-tree> ``` 然后，你可以在 `default-checked-keys` 中设置第一个节点的 key 值，使其默认选中。 ```html <el-tree :data="treeData" :default-expand-all="true" :default-checked-keys="[treeData[0].id]"></el-tree> ``` 这样，el-tree 将会默认选中第一个节点。注意，这里使用了 `treeData[0].id`，你需要根据你的数据结构来获取对应的 key 值。希望能帮到你！如果还有其他问题，请继续提问。

阅读全文