vant多级菜单,vant选项卡,vant选择器,vant cli,vant单选,vant动态加载二级选择器
Vant3 Cascader 级联选择是一个基于 Vue.js 和 Vant3 UI 组件库的交互式控件，用于在多层级的数据结构中进行选择。它允许用户通过一系列下拉列表选择器来浏览和选择树状结构中的选项，每个下拉列表都显示与其前面相邻的下拉列表所选定的选项相关的子选项。

例如，假设有一个包含国家、省份和城市的三级数据结构，用户可以使用 Vant3 Cascader 组件来选择他们所在的地区。当用户首先选择国家时，下拉列表将显示所有可用的国家选项；当用户选择特定国家时，下拉列表将刷新以显示该国家下的所有省份选项；最后，当用户选择省份时，下拉列表将更新以显示该省份下的所有城市选项。用户可以按照这种方式继续选择下去，直到找到他们想要的最终选项。

下面是一个简单的示例代码，它演示了如何使用 Vant3 Cascader 组件来实现一个选择省市区的功能：


<template>
<van-cascader
:options="options"
v-model="selectedValues"
@change="handleChange"
:placeholder="'请选择'"
/>
</template>

<script>
import { ref } from 'vue';

export default {
setup() {
// 初始化数据选项
const options = [
{
text: '北京市',
value: '110000',
children: [
{
text: '市辖区',
value: '110100',
children: [
{ text: '东城区', value: '110101' },
{ text: '西城区', value: '110102' },
{ text: '朝阳区', value: '110105' },
{ text: '丰台区', value: '110106' },
{ text: '石景山区', value: '110107' },
{ text: '海淀区', value: '110108' },
{ text: '门头沟区', value: '110109' },
{ text: '房山区', value: '110111' },
{ text: '通州区', value: '110112' },
{ text: '顺义区', value: '110113' },
{ text: '昌平区', value: '110114' },
{ text: '大兴区', value: '110115' },
{ text: '怀柔区', value: '110116' },
{ text: '平谷区', value: '110117' }
]
}
]
}
];

// 初始化选择值
const selectedValues = ref([]);

// 处理变更事件
function handleChange(value) {
console.log('Selected values:', value);
}

return {
options,
selectedValues,
handleChange
};
}
};
</script>


在这个示例中，我们首先定义了一个包含北京市及其下属区县的选项数组。然后，我们创建了一个具有 options、v-model、@change 和 :placeholder 四个属性的 Vant3 Cascader 组件，并将其与 data 中的选项数据和选择值绑定。最后，我们在组件中定义了一个 handleChange 方法，它会在用户进行选择时被调用，以便我们可以捕获并处理所选的值。