el-tree 默认选中第一个节点
时间: 2024-09-02 15:01:50 浏览: 100
vue el-tree 默认展开第一个节点的实现代码
`el-tree` 是 Element UI 中的一个组件,它是一个基于 Vue 的树形控件。如果你想让默认状态下第一个节点被选中,你可以通过设置 `default-checked-keys` 属性来实现。这个属性接收一个数组,其中包含你想要默认选中的节点的 key(通常是它们的数据唯一标识符)。
示例代码如下:
```html
<template>
<el-tree
:data="treeData"
:default-checked-keys="['firstNodeKey']" <!-- 'firstNodeKey' 替换为你实际的第一个节点的key -->
@check="handleCheck"
></el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [
// ...你的节点数据结构...
{ key: 'firstNodeKey', value: '这是第一个节点' },
// 其他节点...
],
// 可能需要一个方法来处理节点的选中事件
handleCheck({ node, checked }) {
console.log(`节点 ${node.key} 已经被${checked ? "选中" : "取消"}了`);
}
};
}
};
</script>
```
在这个例子中,当你加载页面时,第一个节点就会自动被选中。如果你有多个默认需要选中的节点,可以在数组里添加它们的 key。
阅读全文