在vue中,el-tree新增节点默认勾选复选框
时间: 2023-02-09 10:02:39 浏览: 137
在 vue 中使用 el-tree 组件新增节点并默认勾选复选框,可以使用以下方法:
1. 在 el-tree 组件的 data 属性中,为新增的节点添加 checked 属性,并设置为 true,例如:
```
data: [
{
id: 1,
label: '节点 1',
children: [
{
id: 2,
label: '节点 2',
checked: true
}
]
}
]
```
2. 使用 el-tree 组件的 node-key 属性,并在 data 属性中为新增的节点添加该属性的值,例如:
```
node-key: 'id',
data: [
{
id: 1,
label: '节点 1',
children: [
{
id: 2,
label: '节点 2'
}
]
}
]
```
然后,在 el-tree 组件的 ref 属性中,使用 this.$refs.tree.setCheckedNodes([{ id: 2 }]) 方法将新增的节点设为勾选状态。
```
this.$refs.tree.setCheckedNodes([{ id: 2 }])
```
请注意,在使用 setCheckedNodes 方法时,需要保证 el-tree 组件已经渲染完毕,因此通常需要在 mounted 钩子函数中使用。
```
mounted () {
this.$refs.tree.setCheckedNodes([{ id: 2 }])
}
```
阅读全文