vue基于mint-ui的城市选择3级联动的示例

项目是基于 vue2 的移动端项目

1、实际效果

地址三级联动 mint-ui picker.png

2、首先你需要去下载一个包含中国省份，城市，区县的数据

如下：

https://github.com/artiely/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>

参考文章（mint-ui picker 的四级联动）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。