element plus 中 el-tree的v-model不能用?
时间: 2024-05-15 16:14:17 浏览: 120
在 Element Plus 中,`el-tree` 的 `v-model` 是可以使用的。但需要注意的是,`el-tree` 的 `v-model` 只能绑定一个数组类型的数据,而不能直接绑定一个对象。
例如,以下代码是可以正常工作的:
```html
<template>
<el-tree
:data="data"
:props="defaultProps"
show-checkbox
node-key="id"
v-model="checkedKeys"
></el-tree>
</template>
<script>
export default {
data() {
return {
data: [
{
id: 1,
label: '一级 1',
children: [
{
id: 11,
label: '二级 1-1',
children: [
{
id: 111,
label: '三级 1-1-1'
},
{
id: 112,
label: '三级 1-1-2'
}
]
},
{
id: 12,
label: '二级 1-2',
children: [
{
id: 121,
label: '三级 1-2-1'
},
{
id: 122,
label: '三级 1-2-2'
}
]
}
]
}
],
defaultProps: {
children: 'children',
label: 'label'
},
checkedKeys: [11, 121] // 绑定的数组数据
}
}
}
</script>
```
在以上代码中,我们通过 `v-model` 绑定了 `checkedKeys` 数组的值,实现了 `el-tree` 的多选功能。如果你需要实现单选功能,可以将 `show-checkbox` 属性去掉,并且将 `checkedKeys` 绑定的值改为单个数值即可。
需要注意的是,如果你的 `v-model` 绑定的数据不是数组类型,那么在控制 `el-tree` 选中状态时可能会出现问题。
阅读全文