element-ui 实现三个选择框省市区的联级查询
1、前言
在开发的项目中我们肯定会碰到要我们填写省市区的信息,一般都是自己选择的,不会说让我们自己输入,因为自己输入就会让我们的项目感觉上有点像小demo一样,那么我们究竟该怎么去是实现这个功能呢?翻阅借鉴许多博主的优秀博文,那么我总结出一些做这个的套路。
首先引入地区数据
dispicker.js 如下
(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as anonymous module.
define('ChineseDistricts', [], factory);
} else {
// Browser globals.
factory();
}
})(function () {
var ChineseDistricts =
[
//这里就填写省份数据,这个可以从百度去搜索中国省市区的数据写进去,必须是json格式!!!
]
接着在页面引入使用
import { distPicker } from '../ChinaArea/distpicker'
还需要把我们刚刚写的js文件导入到这个界面,好这个就涉及到怎么把别的包下的js文件导入到所需要的页面中去了!!
//引入别的包的js文件
methods1: function() {
distPicker()
},
接着我们就可以开始使用了!!!
在vue中使用
<template>
<el-form :model="hospital">
<el-form-item label="医院所在省" prop="hsptProvince" label-width="130px">
<el-select
v-model="hospital.hsptProvince"
@change="choseProvince"
clearable
placeholder="请选择省级地区">
<el-option v-for="(item,$index) in province" :key="$index" :label="item.value" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="医院所在市" prop="hsptCity" label-width="130px">
<el-select
v-model="hospital.hsptCity"
@change="choseCity"
clearable
placeholder="请选择市级地区">
<el-option v-for="(item,$index) in city" :key="$index" :label="item.value" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="医院所在区(县)" prop="hsptCountry" label-width="130px">
<el-select
v-model="hospital.hsptCountry"
@change="choseBlock"
clearable
placeholder="请选择区(县)级地区">
<el-option v-for="(item,$index) in block" :key="$index" :label="item.value" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-form>
</template>
<script>
export default {
data(){
return:{
// 三级选择省市区
ChineseDistricts: ChineseDistricts,
province: [],
shi1: [],
qu1: [],
city: [],
block: [],
}
},
methods:{
// 加载china地点数据,三级
getCityData: function() {
let that = this
that.ChineseDistricts.forEach(function(item, index) {
//省级数据
that.province.push({ id: item.code, value: item.name, children: item.cityList })
})
},
// 选省
choseProvince: function(e) {
let that = this
that.city = []
that.block = []
that.hospital.hsptCity = ''
that.hospital.hsptCountry = ''
for (var index2 in that.province) {
if (e === that.province[index2].id) {
that.shi1 = that.province[index2].children
that.hospital.hsptProvince = that.province[index2].value
that.shi1.forEach(function(citem, cindex) {
that.city.push({ id: citem.code, value: citem.name, children: citem.areaList })
})
}
}
console.log(that.hospital.hsptProvince)
},
// 选市
choseCity: function(e) {
let that = this
that.block = []
for (var index3 in that.city) {
if (e === that.city[index3].id) {
that.qu1 = that.city[index3].children
that.hospital.hsptCity = that.city[index3].value
that.E = that.qu1[0].id
that.qu1.forEach(function(bitem, bindex) {
that.block.push({ id: bitem.code, value: bitem.name, children: [] })
})
}
}
console.log(that.hospital.hsptCity)
},
// 选区
choseBlock: function(e) {
this.hospital.hsptCountry = e
console.log(this.hospital.hsptCountry)
}
}
}
</script>
配置到这差不多就OK了,一起看看成果!!
结果
搞定结束下班!