<template>
<van-area
v-model="areaValue"
:columns="columns"
@change="onChange"
/>
</template>
<script>
import { Area } from 'vant';
export default {
components: {
[Area.name]: Area,
},
data() {
return {
areaValue: [], // 用于双向绑定选择的省市区数据
columns: [],
};
},
methods: {
onChange(values, index) {
// 处理省市区选择变化的逻辑
console.log('选择的省市区数据:', values, '选中的索引:', index);
},
},
created() {
// 初始化省市区数据
this.columns = require('vant/src/area/demo/city-data'); // Vant的demo中提供了省市区数据，你可以根据实际需求替换成你自己的数据
},
};
</script>
在这个示例中：
- v-model="areaValue" 用于双向绑定选择的省市区数据。
- :columns="columns" 属性设置省市区数据的列。
- @change 事件会在省市区选择变化时触发，你可以在 onChange 方法中处理选择变化的逻辑。
请注意，上述示例中省市区的数据是从 Vant 的 demo 中引入的。在实际应用中，你需要根据项目需求提供正确的省市区数据。
转载请注明出处：http://www.zyzy.cn/article/detail/5771/Vant