一、Vant UI的三级联动
//1、引入area.js文件
import addressList from "../area";
//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>