1、实际效果
2、首先你需要去下载一个包含中国省份,城市,区县的数据
如下:
https://github.com/artiely/Administrative-divisions-of-China(里面包含二级联动数据,三级联动数据,四级联动数据等,找到自己需要的)
https://github.com/modood/Administrative-divisions-of-China
(一个更好的中国地区数据,推荐用这个)
3、具体代码
主要是用到了mint-ui的picker组件,关于mint-ui的使用就自行看官网
Ⅰ 、html组件
<template>
<div>
<mt-picker :slots="myAddressSlots" @change="onMyAddressChange"></mt-picker>
<p>
地址3级联动:{{ myAddressProvince }} {{ myAddressCity }}
{{ myAddresscounty }}
</p>
</div>
</template>
Ⅱ 、组件方法
<script>
import { Picker } from "mint-ui";
import myaddress from "../assets/address3.json"; //引入省市区数据
console.log(myaddress);
export default {
name: "",
components: {
"mt-picker": Picker
},
props: {},
data() {
return {
myAddressSlots: [
// 省
{
flex: 1,
defaultIndex: 1,
values: Object.keys(myaddress), //省份数组
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: "区/县"
};
},
created() {},
methods: {
onMyAddressChange(picker, values) {
console.log(picker, values);
if (myaddress[values[0]]) {
//这个判断类似于v-if的效果(可以不加,但是vue会报错,很不爽)
picker.setSlotValues(1, Object.keys(myaddress[values[0]])); // Object.keys()会返回一个数组,当前省的数组
picker.setSlotValues(2, myaddress[values[0]][values[1]]); // 区/县数据就是一个数组
console.log("省", picker.getSlotValues(0), picker.getSlotValue(0));
console.log("市", picker.getSlotValues(1), picker.getSlotValue(1));
console.log("区/县", picker.getSlotValues(2), picker.getSlotValue(2));
console.log(picker.getValues());
this.myAddressProvince = values[0];
this.myAddressCity = values[1];
this.myAddresscounty = values[2];
}
}
},
mounted() {
this.$nextTick(() => {
//vue里面全部加载好了再执行的函数 (类似于setTimeout)
this.myAddressSlots[0].defaultIndex = 0;
// 这里的值需要和 data里面 defaultIndex 的值不一样才能够初始化
//因为我没有看过源码(我猜测是因为数据没有改变,不会触发更新)
});
}
};
</script>
picker 中的方法
method: {
slotValueChange () {}, // 触发 picker 的 change 事件
getSlot (slotIndex) {}, // 过去某一列 slot
getSlotValue (index) {}, // 获取某一列 slot 的当前值
setSlotValue (index, value) {}, // 设置某一列 slot 的当前值
getSlotValues (index) {}, // 获取 slot 的 values
setSlotValues (index, values) {}, // 设置 slot 的 values
getValues () {}, // 获取多个组件合成的值
setValues (values) {} // 同时设置多列 slot 的值
}