uni-app封装省市区下拉组件（后台获取数据）

一.后台数据格式

 PROCINCE:[{itemName:'',itemValue:''}]

CITY:[{itemName:'',itemValue}]

AREA:[{itemName:'',itemValue}]

前端将地址数据缓存在了pinia中

前端主要使用picker进行勾选

二.代码

<template><picker @change="bindPickerChange" @columnchange="columnchange" :range="array" range-key="name" :value="pickerIndex"mode="multiSelector"><slot></slot></picker>
</template><script>
import { glPinia } from '@/pinia/index';
import { sysDictList } from '@/api/glApi';
import { getDictCacheKey } from "@/config/dictCacheKey";
const _glPinia = glPinia();
let provinceData = _glPinia.dictsData.PROCINCE;
let cityData = _glPinia.dictsData.CITY;
let areaData = _glPinia.dictsData.AREA;export default {data() {return {array: [],pickerIndex: [0, 0, 0],value: [],	//由外部事件传入的值comType: 'normal'	//当前组件是初始状态还是修改状态};},created() {},methods: {//整个事件的起点,由外部事件调用initSelect(value) {this.value = value;if (!provinceData) {let dictsArr = getDictCacheKey();sysDictList(dictsArr).then(res => {if (res.code == 200) {_glPinia.setDictsData(res.data);provinceData = _glPinia.dictsData.PROCINCE;cityData = _glPinia.dictsData.CITY;areaData = _glPinia.dictsData.AREA;this.startPageEvent(value);}})} else {this.startPageEvent(value);}},startPageEvent(value) {if (Array.isArray(value) && value.length == 3 && value[0].length == 6) {this.comType = 'edit';} else {this.comType = 'normal';}let provinceCode = this.setProvinceData();let cityCode = this.setCityData(provinceCode, 'original');this.setAreaData(cityCode, 'original');},bindPickerChange(selectInfo) {let _index = selectInfo.detail.value;let forData = [0, 1, 2];let data = [];let code = [];forData.forEach(item => {code.push(this.array[item][_index[item]].value);data.push(this.array[item][_index[item]].name);})this.$emit('changeAddress', {data,code});},//列改变columnchange(columnInfo) {let _index = columnInfo.detail.value;let _column = columnInfo.detail.column;//省改变if (_column == 0) {this.pickerIndex[0] = _index;let provinceCode = this.array[0][_index].value.substr(0, 2);let cityCode = this.setCityData(provinceCode, 'select');this.setAreaData(cityCode, 'select');}//市改变if (_column == 1) {this.pickerIndex[1] = _index;let cityCode = this.array[1][_index].value.substr(0, 4);this.setAreaData(cityCode, 'select');}//区改变if (_column == 2) {this.pickerIndex[2] = _index;}},//设置省数据setProvinceData() {let _index;this.array[0] = provinceData.map(item => {return {name: item.itemName,value: item.itemValue}})if (this.comType == 'edit') {_index = this.array[0].findIndex(item => {return item.value == this.value[0];})this.pickerIndex[0] = _index;} else {this.pickerIndex[0] = 0;}return this.array[0][this.pickerIndex[0]].value.substr(0, 2);},//设置市数据，type区分是初始状态还是修改状态setCityData(provinceCode, type) {let _index, _data;_data = cityData.filter(item => {return item.itemValue.substr(0, 2) == provinceCode;})this.array[1] = _data.map(item => {return {name: item.itemName,value: item.itemValue}})if (type == 'original') {if (this.comType == 'edit') {_index = this.array[1].findIndex(item => {return item.value == this.value[1];})this.pickerIndex[1] = _index;} else {this.pickerIndex[1] = 0;}} else {this.pickerIndex[1] = 0;}return this.array[1][this.pickerIndex[1]].value.substr(0, 4);},//设置区数据,type区分是初始状态还是修改状态setAreaData(cityCode, type) {let _index, _data;_data = areaData.filter(item => {return item.itemValue.substr(0, 4) == cityCode;})this.array[2] = _data.map(item => {return {name: item.itemName,value: item.itemValue}})if (type == 'original') {if (this.comType == 'edit') {_index = this.array[2].findIndex(item => {return item.value == this.value[2];})this.pickerIndex[2] = _index;} else {this.pickerIndex[2] = 0;}} else {this.pickerIndex[2] = 0;}},}
};
</script><style></style>