国内专业做网站,优化 seo,电子商务网站推广策略论文,免费简历模板下载word可编辑1、实际效果 2、首先你需要去下载一个包含中国省份#xff0c;城市#xff0c;区县的数据 如下#xff1a; https://github.com/artiely/Administrative-divisions-of-China#xff08;里面包含二级联动数据#xff0c;三级联动数据#xff0c;四级联动数据等#xff0…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组件
templatedivmt-picker :slotsmyAddressSlots changeonMyAddressChange/mt-pickerp地址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里面全部加载好了再执行的函数 类似于setTimeoutthis.myAddressSlots[0].defaultIndex 0;// 这里的值需要和 data里面 defaultIndex 的值不一样才能够初始化//因为我没有看过源码我猜测是因为数据没有改变不会触发更新});}
};
/scriptpicker 中的方法
method: {slotValueChange () {}, // 触发 picker 的 change 事件getSlot (slotIndex) {}, // 过去某一列 slotgetSlotValue (index) {}, // 获取某一列 slot 的当前值setSlotValue (index, value) {}, // 设置某一列 slot 的当前值getSlotValues (index) {}, // 获取 slot 的 valuessetSlotValues (index, values) {}, // 设置 slot 的 valuesgetValues () {}, // 获取多个组件合成的值setValues (values) {} // 同时设置多列 slot 的值
}
