故事：最近，項目需要進行行政區域圍欄的繪制，由于老舊項目是利用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={};},
} <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>
步驟四：數據保存和回顯（親身經歷需要細化保存和回顯步驟才正確保存和回顯）注意，次數方法內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&®ionTemp.city==null&®ionTemp.area==null){data.params=regionTemp.province.value+'|'+regionTemp.province.key;}if(regionTemp.province!=null&®ionTemp.city!=null&®ionTemp.area==null){data.params=regionTemp.province.value+regionTemp.city.value+'|'+regionTemp.province.key+','+regionTemp.city.key;}if(regionTemp.province!=null&®ionTemp.city!=null&®ionTemp.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
)
