1. 安装 Vant： 在你的项目中安装 Vant，你可以使用 npm 或 yarn：
npm install vant@next --save
或
yarn add vant@next
2. 引入 Cascader 组件： 在你的 Vue 组件中引入 Cascader 组件：
import { createApp } from 'vue';
import { Cascader } from 'vant';
const app = createApp(...);
// 全局注册 Cascader
app.use(Cascader);
// 或局部注册 Cascader
app.component(Cascader.name, Cascader);
app.mount('#app');
3. 在模板中使用 Cascader： 在你的模板中使用 Cascader 组件，并传递级联数据：
<template>
<vant-cascader
:options="options"
:title="title"
:placeholder="placeholder"
v-model="selectedOptions"
@change="onChange"
/>
</template>
<script>
export default {
data() {
return {
// 级联数据
options: [
{
text: 'Option1',
value: '1',
children: [
{
text: 'Option1-1',
value: '1-1',
children: [
{ text: 'Option1-1-1', value: '1-1-1' },
{ text: 'Option1-1-2', value: '1-1-2' },
],
},
{
text: 'Option1-2',
value: '1-2',
children: [
{ text: 'Option1-2-1', value: '1-2-1' },
{ text: 'Option1-2-2', value: '1-2-2' },
],
},
],
},
{
text: 'Option2',
value: '2',
children: [
// ...
],
},
// ...
],
title: '选择器标题',
placeholder: '请选择',
selectedOptions: [],
};
},
methods: {
onChange(value, selectedOptions) {
console.log(value, selectedOptions);
},
},
};
</script>
在上面的例子中，你需要根据你的实际需求调整数据结构和样式。级联选择器的数据是通过 options 属性传递的，其中每个选项可以包含 text（显示文本）、value（值）、children（子选项）等属性。通过监听 change 事件，你可以获取用户选择的值和选项。
这是一个简单的 Vant4 Cascader 使用示例，具体根据你的项目需求进行调整。
转载请注明出处：http://www.zyzy.cn/article/detail/5801/Vant