基本用法：
<template>
<van-cascader
v-model="selectedOptions"
:options="cascaderOptions"
@change="handleCascaderChange"
/>
</template>
<script>
export default {
data() {
return {
selectedOptions: [],
cascaderOptions: [
{
text: '浙江省',
value: 'zhejiang',
children: [
{
text: '杭州市',
value: 'hangzhou',
children: [
{ text: '西湖区', value: 'xihu' },
{ text: '余杭区', value: 'yuhang' }
]
},
{
text: '宁波市',
value: 'ningbo',
children: [
{ text: '鄞州区', value: 'yinzhou' },
{ text: '江东区', value: 'jiangdong' }
]
}
]
},
// ...其他省市区数据
]
};
},
methods: {
handleCascaderChange(value, selectedOptions) {
console.log('选中的值:', value);
console.log('选中的选项:', selectedOptions);
}
}
};
</script>
在上述代码中，通过 v-model 双向绑定的方式，你可以获取用户选择的值。通过设置 options 属性，你可以传入级联选择的数据。
自定义字段名：
<template>
<van-cascader
v-model="selectedOptions"
:options="cascaderOptions"
:field-names="{ value: 'id', text: 'name', children: 'items' }"
/>
</template>
<script>
export default {
data() {
return {
selectedOptions: [],
cascaderOptions: [
{
name: '浙江省',
id: 'zhejiang',
items: [
{
name: '杭州市',
id: 'hangzhou',
items: [
{ name: '西湖区', id: 'xihu' },
{ name: '余杭区', id: 'yuhang' }
]
},
{
name: '宁波市',
id: 'ningbo',
items: [
{ name: '鄞州区', id: 'yinzhou' },
{ name: '江东区', id: 'jiangdong' }
]
}
]
},
// ...其他省市区数据
]
};
}
};
</script>
通过设置 field-names 属性，你可以自定义级联选择数据中的字段名，例如 value、text、children 等。
禁用选项：
<template>
<van-cascader
v-model="selectedOptions"
:options="cascaderOptions"
:disabled-options="[ 'zhejiang', 'hangzhou', 'xihu' ]"
/>
</template>
<script>
export default {
data() {
return {
selectedOptions: [],
cascaderOptions: [
{
text: '浙江省',
value: 'zhejiang',
children: [
{
text: '杭州市',
value: 'hangzhou',
children: [
{ text: '西湖区', value: 'xihu' },
{ text: '余杭区', value: 'yuhang' }
]
},
{
text: '宁波市',
value: 'ningbo',
children: [
{ text: '鄞州区', value: 'yinzhou' },
{ text: '江东区', value: 'jiangdong' }
]
}
]
},
// ...其他省市区数据
]
};
}
};
</script>
通过设置 disabled-options 属性，你可以禁用某些选项，让用户无法选择这些选项。
以上是一些 Vant3 Cascader 级联选择组件的基本用法。查阅 Vant3 的官方文档能够获取更详细的信息、配置选项和示例代码：[Vant3 Cascader 级联选择文档](https://vant-contrib.gitee.io/vant/v3/#/zh-CN/cascader)。
转载请注明出处：http://www.zyzy.cn/article/detail/5718/Vant