商洛网站建设求职简历,网络前端开发招聘,元器件网站搭建,泉州哪家网站建设公司好故事#xff1a;最近#xff0c;项目需要进行行政区域围栏的绘制#xff0c;由于老旧项目是利用js保存全国行政区域地址和编码#xff0c;在选择器select进行匹配显示#xff0c;但此方法复杂#xff0c;因此选择集成区域插件region
步骤一#xff1a;用命令安装region…故事最近项目需要进行行政区域围栏的绘制由于老旧项目是利用js保存全国行政区域地址和编码在选择器select进行匹配显示但此方法复杂因此选择集成区域插件region
步骤一用命令安装region插件安装2.2.2版本 npm i -S v-region2.2.2 --force 步骤二在项目全局文件 main.js或manage.js或其全局配置文件 import Vue from vue import Region from v-region Vue.use(Region) 步骤三在页面/模块中使用行政区域选择插件 el-rowel-col :span24!-- v-region :towntrue typegroup v-modelregion valuesregionChange/v-region --div classpostionv-region v-modelregion valuesregionChange/v-region/div/el-col/el-rowmethods:{
// 切换地区regionChange(values) {let selfthis;//回显let tempvalues;values{};self.objtemp;temp{};},
}
步骤四数据保存和回显亲身经历需要细化保存和回显步骤才正确保存和回显注意次数方法内data为步骤三保存的region对象this.obj el-rowel-col :span24 stylemargin-left: -17.5%el-form-item label选行政区域 :propregion!-- v-region :towntrue typegroup v-modelregion valuesregionChange/v-region --v-region v-modeldataForm.region valuesregionChange/v-region/el-form-item/el-col/el-rowmethods: {openDialog(data) {//data为数组保存了已经选择的行政区域信息let self this; self.dataForm.region{province:,city:,area:,town:};self.dataForm.regionTempdata;if(data.province!nulldata.citynulldata.areanull){self.dataForm.region.province data.provincedata.province.key;}if(data.province!nulldata.city!nulldata.areanull){self.dataForm.region.province data.provincedata.province.key;self.dataForm.region.city data.citydata.city.key; }if(data.province!nulldata.city!nulldata.area!null){self.dataForm.region.province data.provincedata.province.key;self.dataForm.region.city data.citydata.city.key;self.dataForm.region.area data.areadata.area.key; }},}
步骤五步骤四回显行政区域后再次选择更新行政区域信息二次保存
methods:{// 切换地区regionChange(values) {let selfthis;
//临时对象self.dataForm.regionTempvalues;},ok() {let self this;self.$refs[dataForm].validate((valid) {if(valid){let regionTempdata.regionTemp;if(regionTemp.provincenull){self.$message({type: warning,message: 请选择行政区域,})return;}if(regionTemp.province!nullregionTemp.citynullregionTemp.areanull){data.paramsregionTemp.province.value|regionTemp.province.key;}if(regionTemp.province!nullregionTemp.city!nullregionTemp.areanull){data.paramsregionTemp.province.valueregionTemp.city.value|regionTemp.province.key,regionTemp.city.key;}if(regionTemp.province!nullregionTemp.city!nullregionTemp.area!null){data.paramsregionTemp.province.valueregionTemp.city.valueregionTemp.area.value|regionTemp.province.key,regionTemp.city.key,regionTemp.area.key;}self.$emit(fecne-modal-ok, data,self.administrationFenceModal.current.overlay)}})},
}
上面步骤五保存操作数据格式例如广东省广州市天河区|编码,编码,编码是方便后台具体保存数据样式更具自己实际情况。
具体更详细区域选择参考Vue Components
