elementui plus 里面的树形控件的默认勾选的节点的 key 的数组设置成动态
时间: 2024-06-10 13:10:45 浏览: 65
您可以使用 props 属性中的 default-checked-keys 属性来设置树形控件的默认勾选节点。将 default-checked-keys 属性设置为一个动态数组即可实现设置勾选节点数组的动态化。
例如:
```html
<template>
<el-tree :data="treeData" :props="treeProps" :default-checked-keys="checkedKeys"></el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [
{
id: 1,
label: '一级节点1',
children: [
{
id: 11,
label: '二级节点1-1'
},
{
id: 12,
label: '二级节点1-2'
}
]
},
{
id: 2,
label: '一级节点2',
children: [
{
id: 21,
label: '二级节点2-1'
},
{
id: 22,
label: '二级节点2-2'
}
]
}
],
treeProps: {
children: 'children',
label: 'label'
},
checkedKeys: [11, 22] // 默认勾选节点的 key 数组
}
},
methods: {
updateCheckedKeys() {
// 动态设置勾选节点的 key 数组
this.checkedKeys = [12, 21]
}
}
}
</script>
```
在上述示例中,我们将 default-checked-keys 属性的值设置为 checkedKeys 数组,该数组中包含了默认勾选的节点的 key。我们还为树形控件设置了 treeProps 属性,该属性指定了树形控件数据中节点的子节点数组和节点显示的文本属性。最后,我们还提供了一个方法 updateCheckedKeys,用于动态更新勾选节点的 key 数组。
阅读全文