自己平常用Element中的样式比较多，最近多出用到三级联动，就想自己写一个，但是吧贼low，后面想优化成一个组件，请各位博友提出宝贵的意见！
省市区json文件地址链接: https://pan.baidu.com/s/1qo0aFS3kK76ZPzx6-hNJ2A 密码:sja7
<!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">
<title>省市区三级联动demo</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div class="demo" id="app">
<el-form :inline="true">
<el-form-item label="aaaa">
<div class="select1">
<el-select v-model="value1" placeholder="请选择" @change="change1">
<el-option v-for="item in options1" :key="item.ssqid" :label="item.ssqname" :value="item.ssqname">
</el-option>
</el-select>
</div>
<div class="select2">
<el-select v-model="value2" placeholder="请选择" @change="change2">
<el-option v-for="item in options2" :key="item.ssqid" :label="item.ssqname" :value="item.ssqname">
</el-option>
</el-select>
</div>
<div class="select3">
<el-select v-model="value3" placeholder="请选择">
<el-option v-for="item in options3" :key="item.ssqid" :label="item.ssqname" :value="item.ssqname">
</el-option>
</el-select>
</div>
</el-form-item>
</el-form>
</div>
</body>
</html>
<script src="jq.js"></script>
<script>
var vm = new Vue({
el: ‘#app‘,
data() {
return {
data: ‘‘,
label1: ‘‘,
label2: ‘‘,
label3: ‘‘,
options1: [],
options2: [],
options3: [],
value1: ‘‘,
value2: ‘‘,
value3: ‘‘
}
},
created() {
var _this = this
$.ajax({
url: ‘./map.json‘,
success: function (data) {
_this.data = data.provinces
_this.options1 = _this.data.province
}
})
},
methods: {
change1(val) {
this.options2 = [];
this.options3 = [];
this.options1.forEach((element, i) => {
if (element.ssqname === val) {
this.options2 = element.cities.city
this.options3 = element.cities.city[0].areas.area
this.value2 = element.cities.city[0].ssqname
this.value3 = element.cities.city[0].areas.area[0].ssqname
}
});
},
change2(val) {
this.options3 = [];
this.options2.forEach((element, i) => {
if (element.ssqname === val) {
this.options3 = element.areas.area
this.value3 = element.areas.area[0].ssqname
}
});
},
}
})
</script>
