Vue 含有"不限"的省市区三级联动的组件
Posted 1994july
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 含有"不限"的省市区三级联动的组件相关的知识，希望对你有一定的参考价值。
工作中会经常会遇到选择省市区三级联动的需求，每次都有不同的需求，比如有不限，比如动态添加多个，比如宽度自定义，比如回显，回显类型不确定。。。等等。。。
每次都要根据需求定制，现在闲下来，将这些暂时遇到的需求整合到了一个组件里面，希望可以暂时救一下在花样需求的沼泽里出不来的人。
个人写的，肯定有可优化的地方，肯定有覆盖不到的地方。请见谅~，欢迎留下你的只言片语，足够我醍醐灌顶~~（不会成语的author，不是一个号前端）
支持一下需求：
- 基于element-ui写的，可自行更换或者用原生；
- 省市区三级，暂时不支持四级；
- 省市区列表是否包含"不限"，可自行从父组件传参，参数：unlimit，取值：true - 有不限，false - 无不限
- 宽度自定义，可自行从父组件传参，参数：pWidth：省宽度，cWidth：市宽度，aWidth：区宽度
- 支持添加多个，如需记录index，传参：fatherIndex
- 地址map前端写死，如有改动，自行改动。
一、引入地址map依赖文件：map.js
地址：https://my.oschina.net/wsxiao/blog/4295971
二、地址选择下拉框子组件
<!--
@Author: DKing
@Desc: 三级联动
@Date: 2020-04-30
-->
<template>
<div>
<el-select
v-model="areaParams.provinceCode"
@change="choseProvince"
clearable
placeholder="请选择"
class=‘el-select-adress el-select-adress-p‘
>
<el-option
v-for="item in defaultProvince"
:key="item.id"
:label="item.value"
:value="item.id">
</el-option>
</el-select>
<el-select
v-model="areaParams.cityCode"
clearable @change="choseCity"
placeholder="请选择"
class=‘el-select-adress el-select-adress-c‘
>
<el-option
v-for="item in cityArray"
:key="item.id"
:label="item.value"
:value="item.id">
</el-option>
</el-select>
<el-select
v-model="areaParams.areaCode"
clearable @change="choseBlock"
placeholder="请选择"
class=‘el-select-adress el-select-adress-a‘
>
<el-option
v-for="item in areaArray"
:key="item.id"
:label="item.value"
:value="item.id">
</el-option>
</el-select>
</div>
</template>
<script>
import {AREA} from "../filters/map";
import {checkNull} from "../filters/filters";
import Vue from ‘vue‘
export default {
props:{
// 回显参数
editAreaParams: null,
// 省下拉框的宽度
pWidth:{
type: String,
},
// 市下拉框的宽度
cWidth:{
type: String,
},
// 区下拉框的宽度
aWidth:{
type: String,
},
// 父组件的index 适用于添加过个地址
fatherIndex:{
type: Number
},
// 是否有 不限 true：有，false：无
unlimit:{
type: Boolean || String,
default: false
}
},
data () {
return {
mapJson: AREA,
defaultProvince: [],
defaultCity: [],
defaultArea: [],
cityArray: [],
areaArray: [],
editAreaParamsTemp: this.editAreaParams,
unlimitTemp: this.unlimit == true || this.unlimit == ‘true‘,
areaParams: {
provinceCode: ‘‘,
cityCode: ‘‘,
areaCode: ‘‘
},
queryParam:{
province: ‘‘,
city: ‘‘,
area: ‘‘
} ,//给父传递参数
queryParamText:{
province: ‘‘,
city: ‘‘,
area: ‘‘
}
}
},
created(){
// 宽度自定义
this.$nextTick(() =>{
let pDom = document.getElementsByClassName(‘el-select-adress-p‘) || []
let cDom = document.getElementsByClassName(‘el-select-adress-c‘) || []
let aDom = document.getElementsByClassName(‘el-select-adress-a‘) || []
for(let p of pDom){
p.children[0].style.width = this.pWidth
}
for(let c of cDom){
c.children[0].style.width = this.cWidth
}
for(let a of aDom){
a.children[0].style.width = this.aWidth
}
})
// 初始化数据
this.getCityData().then(res => {
if(!checkNull(this.editAreaParamsTemp)){
if(typeof(this.editAreaParamsTemp) == ‘string‘){
this.editAreaParamsIsStrHandel()
}
this.areaParams = this.editAreaParamsTemp;
this.showDataHandel(this.areaParams.provinceCode);
}
});
},
methods:{
// 加载地点数据，三级
getCityData:function(){
return new Promise((resolve, reject)=>{
var that = this;
// 省市区数据分类
for (var item in this.mapJson) {
if (item.match(/0000$/)) {//省
that.defaultProvince.push({id: item, value: this.mapJson[item], children: []})
} else if (item.match(/00$/)) {//市
that.defaultCity.push({id: item, value: this.mapJson[item], children: []})
} else {//区
that.defaultArea.push({id: item, value: this.mapJson[item]})
}
}
this.unlimitTemp && that.defaultProvince.unshift({id:‘不限‘, vlaue:‘不限‘, children:[]})
resolve(‘success_p‘)
// 分类市级
for (var index in that.defaultProvince) {
for (var index1 in that.defaultCity) {
if (that.defaultProvince[index].id.slice(0, 2) === that.defaultCity[index1].id.slice(0, 2)) {
that.defaultProvince[index].children.push(that.defaultCity[index1])
}
}
this.unlimitTemp && that.defaultProvince[index].children.unshift({id:‘不限‘, vlaue:‘不限‘, children:[{id:‘不限‘, value:‘不限‘}]})
}
resolve(‘success_c‘)
// 分类区级
for(var item1 in that.defaultCity) {
for(var item2 in that.defaultArea) {
if (that.defaultArea[item2].id.slice(0, 4) === that.defaultCity[item1].id.slice(0, 4)) {
that.defaultCity[item1].children.push(that.defaultArea[item2])
}
}
this.unlimitTemp && that.defaultCity[item1].children.unshift({id:‘不限‘, vlaue:‘不限‘})
}
resolve(‘success_a‘)
})
},
// 选省
choseProvince:function(e) {
for (var index2 in this.defaultProvince) {
if (e === this.defaultProvince[index2].id || e === this.defaultProvince[index2].value) {
this.cityArray = this.defaultProvince[index2].children
this.areaArray = this.defaultProvince[index2].children[0].children;
// 省
this.queryParam.province = this.defaultProvince[index2].id
this.queryParamText.province = this.defaultProvince[index2].value
// 市
this.areaParams.cityCode = this.defaultProvince[index2].children[0].id;
this.queryParam.city = this.cityArray[0].id
this.queryParamText.city = this.cityArray[0].value
// 区
this.areaParams.areaCode = this.defaultProvince[index2].children[0].children[0].id
this.queryParam.area = this.areaArray[0].id
this.queryParamText.area = this.areaArray[0].value
this.$emit("queryParamText",this.queryParamText, this.fatherIndex)
this.$emit("getAreaParam",this.queryParam, this.fatherIndex)
}
}
},
// 回显
showDataHandel: function(e){
console.log(‘回显：‘,e)
for (var index2 in this.defaultProvince) {
if (e === this.defaultProvince[index2].id || e === this.defaultProvince[index2].value) {
e = this.defaultProvince[index2].id
// 省
this.areaParams.provinceCode = this.defaultProvince[index2].id
this.queryParam.province = e
this.queryParamText.province = this.defaultProvince[index2].value
this.cityArray = this.defaultProvince[index2].children
console.log(‘城市列表：‘,this.cityArray)
// 得到选择的城市列表
let currentCity =