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 的值 }

總結

以上是生活随笔為你收集整理的基于mint-ui的城市选择3级联动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。