1.vant-Area爬過(guò)的坑

<template>
    <div class="app">
      <!--confirm   點(diǎn)擊右上方完成按鈕   一個(gè)數(shù)組參數(shù)委可，具體格式看下方數(shù)據(jù)格式章節(jié)
      cancel    點(diǎn)擊取消按鈕時(shí) 
      change    選項(xiàng)改變時(shí)觸發(fā) 參考Picker 實(shí)例，所有列選中值灵临，當(dāng)前列對(duì)應(yīng)的索引-->
        <van-cell-group>
            <!--cell+popup+area省市區(qū)的坑-->
            <van-cell v-model="carmodel" title="省/市/區(qū)" value="" @click="show = true"></van-cell>
            <van-popup v-model="show" position="bottom">
              <van-area
                ref="area"
                value="110000"
                :area-list="areaList"
                @change="onChange"
                @confirm="show = false"
                @cancel="show = false"
              />
            </van-popup>
        </van-cell-group>
    </div>
</template>
<script>
    <!--vant按需引入-->
    import { Cell, CellGroup, Popup, Field,  Area, Picker } from 'vant'
    export default {
        components: {
            VanCell: Cell,
            VanCellGroup: CellGroup,
            VanPopup: Popup,
            VanField: Field,
            VanArea: Area,
            VanPicker: Picker
        },
        data () {
            return {
                show: false,
                carmodel: '',
                <!--假數(shù)據(jù)-->
                areaList: {
                    province_list: {
                      110000: '北京市',
                      120000: '天津市'
                    },
                    city_list: {
                      110100: '北京市',
                      110200: '縣',
                      120100: '天津市',
                      120200: '縣'
                    },
                    county_list: {
                      110101: '東城區(qū)',
                      110102: '西城區(qū)',
                      110105: '朝陽(yáng)區(qū)',
                      110106: '豐臺(tái)區(qū)',
                      120101: '和平區(qū)',
                      120102: '河?xùn)|區(qū)',
                      120103: '河西區(qū)',
                      120104: '南開區(qū)',
                      120105: '河北區(qū)'
                    }
                }
            },
            methods: {
                onChange (picker, value, index) {
                <!--打印看下對(duì)應(yīng)值-->
                  console.log('當(dāng)前值：' + value + '當(dāng)前索引：' + index)
                  <!--因?yàn)榻馕鲞^(guò)來(lái)的數(shù)據(jù)是數(shù)組而carmodel定義字符串-->
                  let areaName = ''
                  for (var i = 0; i < value.length; i++) {
                    areaName = areaName + value[i].name + ' '
                  }
                  this.carmodel = areaName
                }
            }
        }
    }
</script>

效果圖

image