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

这篇具有很好参考价值的文章主要介绍了uni-app封装省市区下拉组件（后台获取数据）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一.后台数据格式

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

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

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

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

前端主要使用picker进行勾选

二.代码文章来源地址https://www.toymoban.com/news/detail-663145.html

<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>

到了这里，关于uni-app封装省市区下拉组件（后台获取数据）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！