vue+vant实现省市联动（van-area）组件（包含比较全面的全国省市数组数据）

组件库太香了，人家nb，自己写的都是**

效果：

 

 

1.安装vant库以及main.js的配置

2.一般结合van-popup组件

</template>
<van-popup 
    v-model="showArea" 
    position="bottom" 
    :style="{ height: '39%' }">
       <van-area 
       :area-list="areaList" 
       :columns-num="2" title="请选择" 
        @change="areaChange"
        @confirm="areaConfirm"
        @cancel="areaCancle"/>
    </van-popup>
</template>

3.vant只给了几个案例，这里引入一个address.js的文件名(内容在文章末尾)

import areaList from '../assets/js/areaList'
export default {
    name: "loginOut",
    components:{
    },
    data(){
　　list:[{tit:'头像',msg:'更改头像'},{tit:'性别',msg:'保密'},{tit:'个性签名',msg:'补充完整'},{tit:'城市',msg:'请选择'},{tit:'修改用户名',msg:'棋云'},{tit:'账号安全',msg:''}],
       showArea:false,
       areaList,
       areaName:''
      }，
methods：{
　　　
//省市二级联动
        areaChange (picker, value, index){
            let areaName = ''
            for (var i = 0; i < value.length; i++) {
                areaName = areaName + value[i].name + ' '
              }
              this.list[3].msg=areaName
              },
        areaConfirm(values){
            //values的值即为用户选中的省市对象，之后可向后端数据交互
            console.log(values)
            this.showArea = false;
        },
        areaCancle(){
            this.showArea = false;
            this.list[3].msg='请选择'
        }
 
    }
}

4.在刚取名为areaList.js的文件里的内容vant官方已给出https://github.com/youzan/vant/blob/dev/src/area/demo/area.js