vue封装的通用五级地址联动选择器组件 [拿来即用]

您所在的位置：网站首页 › vue多级联动下拉菜单多选 › vue封装的通用五级地址联动选择器组件 [拿来即用]

vue封装的通用五级地址联动选择器组件 [拿来即用]

2024-07-11 17:05| 来源: 网络整理| 查看: 265

数据来源：https://api.muxiaoguo.cn/doc/cityLinkage.html UI依赖：https://element.eleme.cn/#/zh-CN/component/select CSS依赖：http://lesscss.cn/

效果：

在这里插入图片描述

调用：

组件源码在最下面在这里插入图片描述

清除验证：

在这里插入图片描述

提交数据

在这里插入图片描述

得到的返回值：

在这里插入图片描述

组件配置说明：属性说明必传类型默认labelWidth表单的label宽度否Number95showRemark是否需要地址的备注否Booleanfalsecol表单的一个输入组宽度，按照elemenUI的占位否Number6data回显的数据回显时必传Object{} 回显数据规则：

必须是对应：

{ provinces: "", city: "", district: "", towns: "", village: "", buildNo: "", unitNo: "", houseNo: "", remark: "" } 组件源码

拿来即用

号楼单元室 /** * @author 全易 * @time 2021-08-13 17:12:59 星期五 * @description 地址选择器 */ export default { name: "es-address", props: { labelWidth: { type: Number, default: 95, }, showRemark: { type: Boolean, default: false, }, col: { type: Number, default: 6, }, data: { type: Object, default() { return {}; }, }, }, watch: { data(now, old) { // console.log(now); this.forms = now; for (let i = 1; i { return response.json(); }) .then((result) => { // console.log(result); switch (level) { case "0": this.dropdowns.provinces = result.data; break; case "1": this.dropdowns.city = result.data; this.dropdowns.district = []; this.dropdowns.towns = []; this.dropdowns.village = []; this.forms.city = ""; this.forms.district = ""; this.forms.towns = ""; this.forms.village = ""; break; case "2": this.dropdowns.district = result.data; this.dropdowns.towns = []; this.dropdowns.village = []; this.forms.district = ""; this.forms.towns = ""; this.forms.village = ""; break; case "3": this.dropdowns.towns = result.data; this.dropdowns.village = []; this.forms.towns = ""; this.forms.village = ""; break; case "4": this.dropdowns.village = result.data; this.forms.village = ""; break; } }); }, submit() { this.$refs["forms"].validate((valid) => { if (valid) { this.$emit("submit", this.forms); } }); }, resetFields() { this.$refs["forms"].resetFields(); for (let i in this.forms) { this.forms[i] = ""; } }, }, }; /deep/.specific { .el-form-item__content { display: grid; grid-template-columns: auto auto auto; gap: 10px; justify-content: space-between; &::after, &::before { display: none; } } } 地址数据来源：

https://github.com/modood/Administrative-divisions-of-China https://gitee.com/modood/Administrative-divisions-of-China

三级一体选择器

使用elementUI的Cascader级联选择器进行地址三级一体选择 https://blog.csdn.net/qq_42618566/article/details/115403544

【本文地址】

vue封装的通用五级地址联动选择器组件 [拿来即用]

vue封装的通用五级地址联动选择器组件 [拿来即用]

今日新闻

推荐新闻