vant的级联选择器回显
时间: 2023-09-23 13:07:35 浏览: 170
Vant的级联选择器可以通过`@change`事件来获取用户选择的值,然后将其赋值给一个变量,最后在页面上展示即可。
下面是一个示例代码:
```vue
<template>
<div>
<van-cascader
:options="options"
:value="selectedValue"
@change="handleChange"
placeholder="请选择"
/>
<div v-if="selectedValue.length > 0">
已选择:{{ selectedValue }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{
value: "zhejiang",
label: "浙江省",
children: [
{
value: "hangzhou",
label: "杭州市",
children: [
{
value: "xihu",
label: "西湖区"
},
{
value: "yuhang",
label: "余杭区"
}
]
},
{
value: "ningbo",
label: "宁波市",
children: [
{
value: "haishu",
label: "海曙区"
},
{
value: "jiangbei",
label: "江北区"
}
]
}
]
},
{
value: "jiangsu",
label: "江苏省",
children: [
{
value: "nanjing",
label: "南京市",
children: [
{
value: "jianye",
label: "建邺区"
},
{
value: "xuanwu",
label: "玄武区"
}
]
},
{
value: "suzhou",
label: "苏州市",
children: [
{
value: "gusu",
label: "姑苏区"
},
{
value: "wujiang",
label: "吴江区"
}
]
}
]
}
],
selectedValue: []
};
},
methods: {
handleChange(value) {
this.selectedValue = value;
}
}
};
</script>
```
在上面的代码中,我们监听了`@change`事件,当用户选择了一个值时,我们将其赋值给`selectedValue`变量。在页面上,我们根据`selectedValue`的长度是否大于0来判断用户是否已经选择了一个值,如果已经选择了,我们就展示出来。
阅读全文