vue 集成行政区域选择插件region和数据回显

2023-12-13 06:02:28

故事:最近,项目需要进行行政区域围栏的绘制,由于老旧项目是利用js保存全国行政区域地址和编码,在选择器select进行匹配显示,但此方法复杂,因此选择集成区域插件region

步骤一:用命令安装region插件(安装2.2.2版本)

npm i -S v-region@2.2.2 --force

步骤二:在项目全局文件 main.js或manage.js或其全局配置文件

import Vue from 'vue'
import Region from 'v-region'
Vue.use(Region)

步骤三:在页面/模块中使用行政区域选择插件

          <el-row>
            <el-col :span="24">
                <!-- <v-region :town="true" type="group" v-model="region" @values="regionChange"></v-region> -->
               <div class="postion">
                <v-region  v-model="region" @values="regionChange"></v-region>
               </div>
            </el-col>
          </el-row>
  
methods:{
// 切换地区
    regionChange(values) {
        let self=this;
       //回显
       let temp=values;
       values={};
       self.obj=temp;
       temp={};

    },
}

步骤四:数据保存和回显(亲身经历需要细化保存和回显步骤才正确保存和回显)注意,次数方法内data为步骤三保存的region对象this.obj

    <el-row>
            <el-col :span="24" style="margin-left: -17.5%">
              <el-form-item label="选行政区域" :prop="'region'">
                <!-- <v-region :town="true" type="group" v-model="region"       @values="regionChange"></v-region> -->
                <v-region  v-model="dataForm.region" @values="regionChange"></v-region>
              </el-form-item>
            </el-col>
          </el-row>

 methods: {

 openDialog(data) {
       //data为数组,保存了已经选择的行政区域信息
      let self = this;     
      self.dataForm.region={province:'',city:'',area:'',town:''};
      self.dataForm.regionTemp=data;
      if(data.province!=null&&data.city==null&&data.area==null){
        self.dataForm.region.province = data.province&&data.province.key;
      }
      if(data.province!=null&&data.city!=null&&data.area==null){
        self.dataForm.region.province = data.province&&data.province.key;
        self.dataForm.region.city = data.city&&data.city.key;        }
      if(data.province!=null&&data.city!=null&&data.area!=null){
        self.dataForm.region.province = data.province&&data.province.key;
        self.dataForm.region.city = data.city&&data.city.key;
        self.dataForm.region.area =data.area&&data.area.key;        }
    
    },


}

步骤五:步骤四回显行政区域后再次选择更新行政区域信息二次保存

methods:{
 // 切换地区
      regionChange(values) {
          let self=this;
//临时对象
          self.dataForm.regionTemp=values;
      },

ok() {
            let self = this;

            self.$refs["dataForm"].validate((valid) => {
               if(valid){
                let regionTemp=data.regionTemp;
                    if(regionTemp.province==null){
                        self.$message({
                            type: 'warning',
                            message: '请选择行政区域',
                        })
                        return;
                    }
                    if(regionTemp.province!=null&&regionTemp.city==null&&regionTemp.area==null){
                      data.params=regionTemp.province.value+'|'+regionTemp.province.key;
                    }
                    if(regionTemp.province!=null&&regionTemp.city!=null&&regionTemp.area==null){
                      data.params=regionTemp.province.value+regionTemp.city.value+'|'+regionTemp.province.key+','+regionTemp.city.key;
                    }
                    if(regionTemp.province!=null&&regionTemp.city!=null&&regionTemp.area!=null){
                      data.params=regionTemp.province.value+regionTemp.city.value+regionTemp.area.value+'|'+regionTemp.province.key+','+regionTemp.city.key+','+regionTemp.area.key;
                    }
              
                self.$emit('fecne-modal-ok', data,self.administrationFenceModal.current.overlay)
               }
            })
        },
}

上面步骤五保存操作数据格式(例如:广东省广州市天河区|编码,编码,编码)是方便后台,具体保存数据样式更具自己实际情况。

具体更详细区域选择参考:Vue Components???????

文章来源:https://blog.csdn.net/weixin_46567616/article/details/134944906
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。