基于mint-ui的城市選擇3級聯(lián)動

項目是基于 vue2 的移動端項目

1、實際效果

地址三級聯(lián)動 mint-ui picker.png

2、首先你需要去下載一個包含中國省份减江,城市,區(qū)縣的數(shù)據(jù)
如下:
https://github.com/artiely/Administrative-divisions-of-China(里面包含二級聯(lián)動數(shù)據(jù),三級聯(lián)動數(shù)據(jù)梧税,四級聯(lián)動數(shù)據(jù)等,找到自己需要的)

https://github.com/modood/Administrative-divisions-of-China(一個更好的中國地區(qū)數(shù)據(jù)称近,推薦用這個

3第队、具體代碼
主要是用到了mint-ui的picker組件,關于mint-ui的使用就自行看官網(wǎng)

Ⅰ 煌茬、html組件

<div>
    <mt-picker :slots="myAddressSlots" @change="onMyAddressChange"></mt-picker>
    <p>地址3級聯(lián)動:{{myAddressProvince}}  {{myAddressCity}} {{myAddresscounty}}</p>
</div>

Ⅱ 斥铺、組件方法

<script>
    import { Picker } from 'mint-ui';
    import myaddress from '../../../static/address3.json'          //引入省市區(qū)數(shù)據(jù)
    export default {
        name: '',
        components: {
            'mt-picker': Picker
        },
        props: {},
        data () {
            return {
             myAddressSlots: [
                    {
                        flex: 1,
                        defaultIndex: 1,        
                        values: Object.keys(myaddress),    //省份數(shù)組
                        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:'區(qū)/縣',
            }
        },
        created() {


        },
        methods: {
          onMyAddressChange(picker, values) {
              if(myaddress[values[0]]){    //這個判斷類似于v-if的效果(可以不加,但是vue會報錯坛善,很不爽)
                    picker.setSlotValues(1,Object.keys(myaddress[values[0]])); //  Object.keys()會返回一個數(shù)組晾蜘,當前省的數(shù)組
                    picker.setSlotValues(2,myaddress[values[0]][values[1]]); //  區(qū)/縣數(shù)據(jù)就是一個數(shù)組
                    this.myAddressProvince = values[0];
                    this.myAddressCity = values[1];
                    this.myAddresscounty = values[2];
                }
            },
        },
        mounted(){
            this.$nextTick(() => {  //vue里面全部加載好了再執(zhí)行的函數(shù)   (類似于setTimeout)
                this.myAddressSlots[0].defaultIndex = 0        
                // 這里的值需要和 data里面 defaultIndex 的值不一樣才能夠初始化
                //因為我沒有看過源碼(我猜測是因為數(shù)據(jù)沒有改變邻眷,不會觸發(fā)更新)
            });
        }
    }
</script>

參考文章 http://www.cnblogs.com/coolslider/p/7076390.html (mint-ui picker 的四級聯(lián)動)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市剔交,隨后出現(xiàn)的幾起案子肆饶,更是在濱河造成了極大的恐慌,老刑警劉巖岖常,帶你破解...
    沈念sama閱讀 211,561評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件驯镊,死亡現(xiàn)場離奇詭異,居然都是意外死亡竭鞍,警方通過查閱死者的電腦和手機板惑,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,218評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來偎快,“玉大人冯乘,你說我怎么就攤上這事∩辜校” “怎么了裆馒?”我有些...
    開封第一講書人閱讀 157,162評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長丐怯。 經(jīng)常有香客問我喷好,道長,這世上最難降的妖魔是什么读跷? 我笑而不...
    開封第一講書人閱讀 56,470評論 1 283
  • 正文 為了忘掉前任梗搅,我火速辦了婚禮,結果婚禮上舔亭,老公的妹妹穿的比我還像新娘些膨。我一直安慰自己蟀俊,他們只是感情好钦铺,可當我...
    茶點故事閱讀 65,550評論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著肢预,像睡著了一般矛洞。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上烫映,一...
    開封第一講書人閱讀 49,806評論 1 290
  • 那天沼本,我揣著相機與錄音,去河邊找鬼锭沟。 笑死抽兆,一個胖子當著我的面吹牛,可吹牛的內容都是我干的族淮。 我是一名探鬼主播辫红,決...
    沈念sama閱讀 38,951評論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼凭涂,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了贴妻?” 一聲冷哼從身側響起切油,我...
    開封第一講書人閱讀 37,712評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎名惩,沒想到半個月后澎胡,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,166評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡娩鹉,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,510評論 2 327
  • 正文 我和宋清朗相戀三年攻谁,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片弯予。...
    茶點故事閱讀 38,643評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡巢株,死狀恐怖,靈堂內的尸體忽然破棺而出熙涤,到底是詐尸還是另有隱情阁苞,我是刑警寧澤,帶...
    沈念sama閱讀 34,306評論 4 330
  • 正文 年R本政府宣布祠挫,位于F島的核電站那槽,受9級特大地震影響,放射性物質發(fā)生泄漏等舔。R本人自食惡果不足惜骚灸,卻給世界環(huán)境...
    茶點故事閱讀 39,930評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望慌植。 院中可真熱鬧甚牲,春花似錦、人聲如沸蝶柿。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,745評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽交汤。三九已至雏赦,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間芙扎,已是汗流浹背星岗。 一陣腳步聲響...
    開封第一講書人閱讀 31,983評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留戒洼,地道東北人俏橘。 一個月前我還...
    沈念sama閱讀 46,351評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像圈浇,于是被迫代替她去往敵國和親寥掐。 傳聞我的和親對象是個殘疾皇子例获,可洞房花燭夜當晚...
    茶點故事閱讀 43,509評論 2 348

推薦閱讀更多精彩內容

  • 轉載 :OpenDiggawesome-github-vue 是由OpenDigg整理并維護的Vue相關開源項目庫...
    果汁密碼閱讀 23,100評論 8 124
  • 來源:github.com Vue.js開源項目速查表:https://www.ctolib.com/cheats...
    zhangtaiwei閱讀 11,607評論 1 159
  • 任何事情都有相對性,那些肯定的曹仗,站的角度不同榨汤,就不一定是這樣。因此怎茫,不要妄下定論收壕,那些遺留下來的歷經(jīng)歲月磨礪的,被...
    海光明閱讀 210評論 0 0
  • 1小白鞋要不要白 那天有個人跟我說:“哎轨蛤,你知道嗎蜜宪?其實小白鞋要臟一點才好看,有感覺祥山∑匝椋” 我愣了幾秒,低頭看了一眼...
    就是流氓閱讀 267評論 18 4
  • 當把某個元素的所有子元素設置為flex: 1;時缝呕,并不能保證每個子元素占用的寬度相等 例如: 上面這段代碼并不能保...
    普萊那閱讀 680評論 0 0