使el-cascader选中某个子节点时,v-model只是选中节点的值
时间: 2023-07-01 10:05:10 浏览: 146
当 El Cascader 组件选中某个子节点时,v-model 实际上绑定的是整个选中节点的对象,而不仅仅是其值。这个对象包含了该节点的所有信息,包括 value、label、children 等。
如果你只需要选中节点的值,可以通过监听 El Cascader 的 change 事件,在事件回调函数中获取选中节点的值,并将其赋值给一个变量或属性。
例如:
```
<template>
<el-cascader
v-model="selectedNode"
:options="options"
@change="handleChange"
></el-cascader>
</template>
<script>
export default {
data() {
return {
selectedNodeValue: null,
options: [
{
value: '1',
label: '一级菜单',
children: [
{
value: '1-1',
label: '二级菜单1'
},
{
value: '1-2',
label: '二级菜单2'
}
]
},
{
value: '2',
label: '一级菜单2',
children: [
{
value: '2-1',
label: '二级菜单3'
},
{
value: '2-2',
label: '二级菜单4'
}
]
}
]
}
},
methods: {
handleChange(value) {
this.selectedNodeValue = value[value.length - 1];
}
}
}
</script>
```
在上面的示例中,我们监听了 El Cascader 的 change 事件,并在事件回调函数中获取了选中节点的值。然后,我们将其赋值给了 selectedNodeValue 属性,这个属性就只包含了选中节点的值。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)