1, 实际效果
地址三级联动 mint-ui picker.png
2, 首先你需要去下载一个包含中国省份, 城市, 区县的数据
如下:
- (这个地址 https://github.com/artiely/Administrative-divisions-of-China 里面包含二级联动数据, 三级联动数据, 四级联动数据等, 找到自己需要的)
- (一个更好的中国地区数据, 推荐用这个 https://github.com/modood/Administrative-divisions-of-China )
3, 具体代码
主要是用到了 mint-ui 的 picker 组件, 关于 mint-ui 的使用就自行看官网
,html 组件
- <div>
- <mt-picker :slots="myAddressSlots" @change="onMyAddressChange"></mt-picker>
- <p > 地址 3 级联动:{{myAddressProvince}} {{myAddressCity}} {{myAddresscounty}}</p>
- </div>
, 组件方法
- <script>
- import {
Picker
- }
- from 'mint-ui';
- import myaddress from '../../../static/address3.json' // 引入省市区数据
- 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) {
- 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]]); // 区 / 县数据就是一个数组
- 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>
参考文章 vue mint-ui 实现省市区街道 4 级联动 (mint-ui picker 的四级联动)
来源: http://www.jb51.net/article/137740.htm