省市区 - 接口加载数据

大聪明了

已于 2023-03-19 18:23:41 修改

阅读量220

点赞数 1

分类专栏： # Element UI 文章标签： javascript vue.js 前端

于 2023-03-19 17:42:12 首次发布

本文链接：https://blog.csdn.net/LQS000/article/details/129653530

版权

Element UI 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

该代码示例展示了如何在Vue.js中使用ElementUI的Cascader组件通过lazyLoad属性动态加载省市区数据。当层级改变时，它会调用`getArea`API获取相应级别的区域数据，并设置节点的children。同时，提供了处理默认地址值的逻辑。

摘要由CSDN通过智能技术生成

解析：https://element.eleme.io/#/zh-CN/component/cascader
通过lazyload来设置加载数据源的方法
在这里插入图片描述
HTML

<el-cascader v-model="selectedOptions" class="input-width-250" size="small" :options="options" @change="handleChooseAddressChange" :props="props"/>

JS
一、
在这里插入图片描述

import { getArea } from '@/api/shop';
let initProvinceCode = '';

二、
在这里插入图片描述

		options: '',
		selectedOptions: ['广东省', '广州市', '荔湾区'], // 选择的地址默认
		// 省市区
		props: {
			lazy: true,
			lazyLoad(node, resolve) {
				let that = this;
				const {
					level,
					label
				} = node;

				setTimeout(() => {
					if (level === 1) {
						// 加载市
						node.children = []; //防止加载重复数据
						this.provinceName = label;
						let data = {
							provinceName: label,
							type: 2
						};
						getArea(data).then(res => {
							resolve(res.data);
						});
					} else if (level === 2) {
						// 加载区
						node.children = [];
						let data = {
							provinceName: this.provinceName || initProvinceCode,
							code: label,
							type: 3
						};

						getArea(data).then(res => {
							res.data.forEach(el => {
								el.leaf = level >= 2; //取消最后一级箭头
							});
							resolve(res.data);
						});
					}
				}, 100);
			}
		}

三、
在这里插入图片描述

	// 地址选择默认值处理
	if (this.form.provinceCode) {
		console.log('走 4', provinceCode + cityCode + areaCode)
		this.getProvinceFunc(provinceCode, cityCode, areaCode);
	}

四、
在这里插入图片描述

		// 初始默认赋值 - 省市区
		getProvinceFunc(lable, cityCode, areaCode) {
			// 请求省
			let data = {
				type: 1
			};
			let provinceList = '';
			getArea(data).then(res => {
				provinceList = res.data;
				// 请求市
				let data = {
					provinceName: lable,
					type: 2
				};
				let provinceIndex = '';
				provinceList.forEach((el, index) => {
					if (el.label === lable) {
						provinceIndex = index;
					}
				});
				getArea(data).then(res => {
					provinceList[provinceIndex].children = res.data;
					let data = {
						provinceName: lable,
						code: cityCode,
						type: 3
					};
					let cityIndex = '';
					provinceList[provinceIndex].children.forEach((el, index) => {
						if (el.label === cityCode) {
							cityIndex = index;
						}
					});
					// 请求区
					getArea(data).then(res => {
						res.data.forEach(el => {
							el.leaf = true; //回显必填
						});

						provinceList[provinceIndex].children[cityIndex].children = res
							.data; //某个市children
						this.options = provinceList;
						// 设置值
						initProvinceCode = lable; //设置默认的省
						this.selectedOptions = [lable, cityCode, areaCode];
					});
				});
			});
		},

		handleChooseAddressChange(value) {
			console.log('value', value);
			this.form.provinceCode = value[0];
			this.form.cityCode = value[1];
			this.form.areaCode = value[2];
		}