vant多级菜单,vant cli,vant css,vant中select组件,vant组件,vant单选
Vant4 Cascader 是一种前端组件，用于实现级联选择功能。级联选择意味着用户可以从一个下拉列表中选择一个选项，然后基于所选选项的值，动态显示下一个相关的下拉列表，以便用户进行更具体的选择。这个过程可以一直持续到最后一层（最后一个下拉列表），以便用户选择他们需要的最终选项。

例如，考虑一个包含城市和区县的级联选择器。当用户选择特定省份时，级联选择器会动态显示该省份下所有的城市。然后，当用户选择特定的城市时，级联选择器将再次动态显示该城市下的所有区县。用户可以反复使用这个过程，以便选择他们需要的最终目标。

以下是一个简单的 Vant4 Cascader 级联选择示例代码：

html
<template>
<van-cascader
:options="options"
v-model="selectedValues"
@change="onChange"
placeholder="请选择地址" />
</template>

<script>
export default {
data() {
return {
options: [
{
value: 'Beijing',
label: '北京市',
children: [
{
value: 'Dongcheng District',
label: '东城区'
},
{
value: 'Xicheng District',
label: '西城区'
}
]
},
{
value: 'Shanghai',
label: '上海市',
children: [
{
value: 'Pudong New Area',
label: '浦东新区'
},
{
value: 'Huangpu District',
label: '黄浦区'
}
]
}
],
selectedValues: []
};
},

methods: {
onChange(values) {
console.log(values);
}
}
};
</script>


在这个示例中，我们定义了一个 options 数组，它包含了两个省市的信息。每个省市都有一个 value 和 label 属性，以及一个 children 子数组，它包含了城市或区县的信息。当用户选择某个省份时，级联选择器会显示该省份下所有的城市或区县。所选值将存储在 selectedValues 中，并通过 onChange 方法输出到控制台上。