vue四级联动下拉菜单
时间: 2023-06-21 08:16:14 浏览: 81
Vue四级联动下拉菜单可以使用Vue的数据绑定和组件化思想来实现。具体操作如下:
1. 在父组件中定义一个数组,存储四级联动数据。
2. 定义三个子组件,分别用来显示省、市、区的下拉菜单。
3. 在父组件中使用v-for指令遍历数组,将数据传递给子组件。
4. 在子组件中定义props属性,接受父组件传递过来的数据。
5. 在子组件的template中使用v-for指令遍历数据,渲染下拉菜单。
6. 在子组件的methods中定义一个change事件,用来触发父组件的数据更新操作。
具体代码如下:
父组件:
```
<template>
<div>
<province-select :provinces="provinces" @change="handleProvinceChange" />
<city-select :cities="cities" @change="handleCityChange" />
<district-select :districts="districts" @change="handleDistrictChange" />
</div>
</template>
<script>
import ProvinceSelect from './ProvinceSelect.vue'
import CitySelect from './CitySelect.vue'
import DistrictSelect from './DistrictSelect.vue'
export default {
components: {
ProvinceSelect,
CitySelect,
DistrictSelect
},
data() {
return {
provinces: [
{ id: 1, name: '北京市' },
{ id: 2, name: '上海市' },
{ id: 3, name: '广东省' }
],
cities: [],
districts: []
}
},
methods: {
handleProvinceChange(province) {
this.cities = [
{ id: 1, name: '北京市' },
{ id: 2, name: '上海市' },
{ id: 3, name: '广州市' }
]
this.districts = []
},
handleCityChange(city) {
this.districts = [
{ id: 1, name: '东城区' },
{ id: 2, name: '西城区' },
{ id: 3, name: '黄浦区' },
{ id: 4, name: '徐汇区' },
{ id: 5, name: '天河区' },
{ id: 6, name: '番禺区' }
]
},
handleDistrictChange(district) {
console.log(district)
}
}
}
</script>
```
省级子组件:
```
<template>
<div>
<select v-model="selectedProvince" @change="handleChange">
<option value="">请选择省份</option>
<option v-for="province in provinces" :key="province.id" :value="province">{{province.name}}</option>
</select>
</div>
</template>
<script>
export default {
props: {
provinces: {
type: Array,
default: []
}
},
data() {
return {
selectedProvince: null
}
},
methods: {
handleChange() {
this.$emit('change', this.selectedProvince)
}
}
}
</script>
```
市级子组件:
```
<template>
<div>
<select v-model="selectedCity" @change="handleChange">
<option value="">请选择城市</option>
<option v-for="city in cities" :key="city.id" :value="city">{{city.name}}</option>
</select>
</div>
</template>
<script>
export default {
props: {
cities: {
type: Array,
default: []
}
},
data() {
return {
selectedCity: null
}
},
methods: {
handleChange() {
this.$emit('change', this.selectedCity)
}
}
}
</script>
```
区级子组件:
```
<template>
<div>
<select v-model="selectedDistrict" @change="handleChange">
<option value="">请选择区县</option>
<option v-for="district in districts" :key="district.id" :value="district">{{district.name}}</option>
</select>
</div>
</template>
<script>
export default {
props: {
districts: {
type: Array,
default: []
}
},
data() {
return {
selectedDistrict: null
}
},
methods: {
handleChange() {
this.$emit('change', this.selectedDistrict)
}
}
}
</script>
```
相关推荐
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)