ElementUI和VantUI地址三级联动

一、Vant UI的三级联动

//1、引入area.js文件

import addressList from "../area"; 

 area.js文件下载

//2.在data中定义数据

  data() {
    return {
       //  地址三级联动数据
      //   地址弹窗标识
      showAddress: false,
      // 当前选中的省市区code
      areaNum: "",
      // 省市区列表
      areaList: addressList
    }; 

 

//3.在methods 中定义方法 

  methods: {
    // 点击展示地址弹窗
    showAddressChuang () {
        this.showAddress = true
    },
    // 三级联动点击确定按钮事件
    sure(val) {
        // console.log(val);
        this.userlist.address = val[0].name + "/"+val[1].name+"/"+val[2].name
        this.showAddress = false
    },
    // 三级联动点击取消按钮事件
    exit() {
        this.showAddress = false
    },
    // 三级联动状态改变事件
    onChange() {}
  }

 //4.元素部分

<van-field v-model="userlist.address" placeholder="请选择省市区" label="省市区" @click="showAddressChuang"/>
<!-- 省市区选择弹窗 -->
        <van-popup v-model="showAddress" position="bottom" :style="{ height: '50%' }">
          <van-area
            :area-list="areaList"
            :value="areaNum"
            @confirm="sure"
            @cancel="exit"
            @change="onChange"
          />
        </van-popup>

 

 二、ElementUI三级联动

安装插件

npm install element-china-area-data -S

//引用

import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data' 

 

说明：

【1】、provinceAndCityData：是省市二级联动数据（不带“全部”选项）

【2】、regionData：是省市区三级联动数据（不带“全部”选项）

【3】、provinceAndCityDataPlus：是省市二级联动数据（带“全部”选项）

【4】、regionDataPlus：是省市区三级联动数据（带“全部”选项）

上述的"全部"选项绑定的value是空字符串"",相当于不选择省市区

【5】、CodeToText：是个大对象，属性是区域码，属性值是汉字

             例如：CodeToText['110000’]输出 北京市

【6】、TextToCode： 是个大对象，属性是汉字，属性值是区域码

             例如：TextToCode ['北京市'].code 输出 110000,

                        TextToCode ['北京市']['市辖区'].code 输出110100,   

                        TextToCode ['北京市']['市辖区']['朝阳区'].code 输出110105

//使用

<template>
    <div id="app">
        <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange">
        </el-cascader>
      </div>
</template>
 
<script>
  import { regionData} from 'element-china-area-data'
  export default {
    data() {
      return {
        options: regionData,//省市区三级联动数据（不带“全部”选项）
        selectedOptions: []
      }
    },
    methods: {
      handleChange(value) {
        console.log(value)
      }
    }
  }
</script>