我也是第一次寫這種地址聯動的
剛開始的時候 我還以為直接用select來寫 后來公司的ios告知並不是這樣的
他說應該時這樣的
於是第一想法 趕緊找插件吧
但是找了一會未果 就問了公司大神 他剛開始更我講了滴滴的一個插件
但是不怎么好用 於是乎他又讓我用了這個插件
首先使用方法
可以參考官網 http://mint-ui.github.io/#!/zh-cn 這里不多說了 因為下面還有很多內容
在一切准別就緒之后 你會發現官網上給的都很雞肋 很少的東西
自己整理的思路時正確的 但是怎么實現 實在是想不起來
------------------------------------------------我是分界線--------------------------------------------
於是我開始 找度姨
首先你先找一個全國三級聯動的地址json文件
https://github.com/artiely/Administrative-divisions-of-China（里面包含二級聯動數據，三級聯動數據，四級聯動數據等，找到自己需要的）
一、html組件
<div>
<mt-picker :slots="myAddressSlots" @change="onMyAddressChange">
</mt-picker>
<p>地址3級聯動：{{myAddressProvince}} {{myAddressCity}} {{myAddresscounty}}</p>
</div>
二、組件方法
<script>
import { Picker } from 'mint-ui';
import myaddress from '../component/address3.json'
export default {
name: '',
components: {
'mt-picker': Picker
},
props: {},
data () {
return {
isShowAddress:false,
myAddressSlots: [
{
flex: 1,
defaultIndex: 1,
values: Object.keys(myaddress), //省份數組
className: 'slot1',
textAlign: 'center'
}, {
divider: true,
content: '-',
className: 'slot2'
}, {
flex: 1,
values: [],
className: 'slot3',
textAlign: 'center'
},{
divider: true,
content: '-',
className: 'slot4'
},{
flex: 1,
values: [],
className: 'slot5',
textAlign: 'center'
}
],
myAddressProvince:'',
myAddressCity:'',
myAddresscounty:'',
}
},
created() {
},
methods: {
goBack (){
this.$router.go(-1)
},
closeShowAddress (e){
if(e.target == this.$refs.selectAddress){
this.isShowAddress = !this.isShowAddress;
}
},
onMyAddressChange(picker, values) {
if(myaddress[values[0]]){ //這個判斷類似於v-if的效果（可以不加，但是vue會報錯，很不爽）
picker.setSlotValues(1,Object.keys(myaddress[values[0]])); // Object.keys()會返回一個數組，當前省的數組
picker.setSlotValues(2,myaddress[values[0]][values[1]]); // 區/縣數據就是一個數組
this.myAddressProvince = values[0];
this.myAddressCity = values[1];
this.myAddresscounty = values[2];
}
},
},
mounted(){
this.$nextTick(() => { //vue里面全部加載好了再執行的函數 （類似於setTimeout）
this.myAddressSlots[0].defaultIndex = 0
// 這里的值需要和 data里面 defaultIndex 的值不一樣才能夠初始化
//因為我沒有看過源碼（我猜測是因為數據沒有改變，不會觸發更新）
});
}
}
</script>
好了 幫大家整理好格式了 好看一點 真愛啊
對了 使用的時候注意一點 就是你的address.json 我剛開始復制這個的時候一直把這個json外部寫一個【】
然后一直不出來漢字 只有第一列是數字 然后覺得自己好白痴
反正你把這些寫上去就會有上圖的效果了
——————————————補充——————————————
還有一些朋友不太明白我寫的，出現了各種問題，我剛才又整理了一遍。再詳細一些（我只能這樣了）。
別忘記引入mint-ui的文件（希望大家學會看文檔鴨~）
<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
<!-- 引入組件庫 -->
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>
有的人出現的問題是因為address.json文件的問題，其實人家已經把下載地址寫在上面了 ，為啥木有人看捏 （哭死啊）
我這里把三級聯動的文件發出來吧 由於文章已經很長了 我會單獨寫一篇文章 有需要的直接復制就可以了
唉呀媽呀 當仙女可真累啊
三級聯動json文件地址：https://www.cnblogs.com/WoAiZmm/p/10001426.html
格式自己整理吧（蜜汁微笑）