以下是一个简单的示例,展示了一个基本的 Vue 组件,用于三省联动前端界面。这个示例包括一个省市区三级联动的选择器。
<template>
<div>
<select v-model="selectedProvince" @change="onProvinceChange">
<option value="">请选择省份</option>
<option v-for="province in provinces" :key="province.id" :value="province.id">{{ province.name }}</option>
</select>
<select v-model="selectedCity" @change="onCityChange" v-if="selectedProvince">
<option value="">请选择城市</option>
<option v-for="city in cities" :key="city.id" :value="city.id">{{ city.name }}</option>
</select>
<select v-model="selectedDistrict" v-if="selectedCity">
<option value="">请选择区/县</option>
<option v-for="district in districts" :key="district.id" :value="district.id">{{ district.name }}</option>
</select>
</div>
</template>
<script>
export default {
data() {
return {
provinces: [
{ id: 1, name: '省份1' },
{ id: 2, name: '省份2' },
// 其他省份
],
cities: [],
districts: [],
selectedProvince: '',
selectedCity: '',
selectedDistrict: ''
};
},
methods: {
onProvinceChange() {
// 根据选中的省份获取对应的城市列表,这里假设有一个函数 fetchCitiesByProvinceId 返回对应省份的城市列表
this.cities = fetchCitiesByProvinceId(this.selectedProvince);
this.selectedCity = ''; // 重置城市选择
this.districts = []; // 重置区/县选择
},
onCityChange() {
// 根据选中的城市获取对应的区/县列表,这里假设有一个函数 fetchDistrictsByCityId 返回对应城市的区/县列表
this.districts = fetchDistrictsByCityId(this.selectedCity);
this.selectedDistrict = ''; // 重置区/县选择
}
}
};
</script>
在这个简单的示例中,我们创建了一个包含省、市、区三级联动选择器的 Vue 组件。当选择省份时,会触发 onProvinceChange 方法,根据选中的省份获取对应的城市列表,并重置城市和区/县的选择。当选择城市时,会触发 onCityChange 方法,根据选中的城市获取对应的区/县列表,并重置区/县的选择。