v-distpicker 前端展現三級地址，返回名稱及對應的編碼

背景：

使用v-distpicker前端展現省市區，並將選中的結果返回給後端，後端展現所選擇的 省市區或對應的地區編碼

 

官方地址：

https://distpicker.pigjian.com/

官方文檔的介紹及demo也很清晰，根據所選擇的省市區會對應返回 名稱、編碼，如：

 

 

使用：

1.先安裝 v-distpicker

1 npm install v-distpicker --save

或

1 yarn add v-distpicker --save

 

 2.main.js 引入 Distpicker

1 import Distpicker from 'v-distpicker'; 2 
3 Vue.component('v-distpicker', Distpicker);

3. 在你想要使用的頁面中引入 Distpicker

1 <script>
2 import VDistpicker from 'v-distpicker'
3 
4 export default { 5  components: { VDistpicker } 6 } 7 
8 </script>

 

以上是通用的格式

4.使用三級地址

1 <template>
2 <v-distpicker @selected="select" province="江蘇省" city="南京市" area="雨花臺區" :rows="17"></v-distpicker>
3 </template>

 

5.在3中加入如下代碼獲取名稱和編碼

<script> import VDistpicker from 'v-distpicker' export default { data() { return { form: { areaStartCode:'320114',//默認值
 } }; }, components: { VDistpicker }, methods: { selected: function(data) { //this.provincedata = data.province.value;//省名稱
          //this.citydata = data.city.value;//市名稱
          //this.provincecode = data.province.code;//省編碼
          //this.citycode = data.city.code;//市編碼 
 console.log(data.area.code);//打印地區編碼
 console.log(data.area.value);//打印地區名稱
          this.form.areaStartCode = data.area.code //將編碼賦值給form，給後端時候，template中需加入 <el-form></el-form>
 }, }, }; </script>

如代碼中的註釋，想將結果傳給後端，可使用 以下格式：具體見https://www.cnblogs.com/whycai/p/11469375.html

this.form.areaStartCode = data.area.code //將編碼賦值給form，給後端時候，template中需加入 <el-form></el-form>

 

演示：