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) {}, // 过去某一列 slotgetSlotValue (index) {}, // 获取某一列 slot 的当前值setSlotValue (index, value) {}, // 设置某一列 slot 的当前值getSlotValues (index) {}, // 获取 slot 的 valuessetSlotValues (index, values) {}, // 设置 slot 的 valuesgetValues () {}, // 获取多个组件合成的值setValues (values) {} // 同时设置多列 slot 的值
}
)
)
)
