思路
- 点第一级的时候默认后面显出联动数据的第一项，点击请选择的时候隐藏关联的后面那一项；(v-if 或者 v-show 控制是否显示)
- v-model来绑定数据,每次点击下拉框的时候遍历取到的数据，当前取到的城市名字(item.name)和默认的城市(this.prov)相同的时候，把市级的数据(item.sub)放到下一级下拉框中(this.cityArr)；县级也是这个道理
- 取到的数据下标为0默认是请选择，所以把索引为1的那一项放到下拉框中，通过v-model 来显示出来
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 百度下载省市县JSON数据，放到一个JS文件中 -->
<script src="select.js"></script>
<title>三级联动</title>
</head>
<body>
<div id="app">
<!-- upDateCity();upDateDistrict() 解决刷新的时候2级数据显示，3级数据没有显示出来。
让3级在点第一级的时候一起执行就好了 -->
<select v-model="prov" @change="upDateCity();upDateDistrict()">
<option v-for="(v,i) in arr" :key="v.name">{{v.name}}</option>
</select>
<select v-model="city" @change="upDateDistrict()">
<option v-for="(v,i) in cityArr" :key="v.name">{{v.name}}</option>
</select>
<!--
第二级点击请选择不显示后面的下拉框，这里用v-if 或者 v-show 都可以
v-if 切换不是很频繁，判断操作一次或较少；v-if是真正的条件渲染，切换过程中,是动态的向DOM树内添加或者删除DOM元素
v-show本质就是标签display设置为none,控制隐藏,性能更好一些。
-->
<select v-model="district" v-show="district">
<option v-for="(v,i) in districtArr" :key="v.name">{{v.name}}</option>
</select>
</div>
<script>
const axios = cityList;
console.log(axios)
let vm = new Vue({
el: "#app",
data: {
arr: axios,
prov: '北京',//默认城市
city: '',//城市
cityArr: [],
district: '',//县/区
districtArr: []
},
created() {
},
mounted() {
this.upDateCity();
this.upDateDistrict();
},
methods: {
upDateCity() {
this.arr.forEach(item => {
if (item.name == this.prov) {
this.cityArr = item.sub;
}
});
this.city = this.cityArr[1].name;
},
upDateDistrict() {
this.cityArr.forEach(item => {
if (item.name == this.city) {
this.districtArr = item.sub;
}
});
this.districtArr && this.districtArr.length > 0 ? this.district = this.districtArr[1].name : this
.district = '';
}
}
})
</script>
</body>
</html>
展示效果
