uniapp实现省市区选择联动、vue-elementUI实现省市区选择联动

这篇文章主要是两个部分，一个是uniapp实现的省市区联动，一个是elementUI里面的Cascader 级联选择器实现的

---

数据格式

下面是后台接口地址列表返回的数据格式
这是省的数据格式

这是市的数据格式

这是区、镇的数据格式

简单来说就是这样，需要嵌套结构，这样才能用到本篇文字的选择

province:[{
   
  city:[{
   
     district:[{
   }]
   }]
 }],

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、uniapp实现省市区选择联动

1.导入插件

先在uniapp插件市场里面引入地址的插件，我用的这个pickerAddress，感谢这位大佬的插件

2.页面里面使用

1.先在script标签里面引入刚才下载好的插件

import pickerAddress from '@/components/common/Address/pickerAddress.vue'

2.注册插件

components: {
   
    pickerAddress
},

3.data里面定义一个变量，用来存储选择器选择之后显示的数据

data () {
   
    return {
   
    	selectaddress: '点击选择',
    }
}

4.HTML里面使用选择地址的插件

<pickerAddress @change="changeAddress">{
   {
    selectaddress }}</pickerAddress>

5.method里面获取选择的数据（这里面接收的data就是选择的数据）

changeAddress (data) {
   
      console.log(data)
      this.selectaddress = data.data.join('')	// 这段就是显示我们选择省市区的文字信息
},

3.修改插件里面的代码，用于我们需要的数据

1.template里面的内容

<picker @change="bindPickerChange"
					@columnchange="columnchange"
					:range="array" range-key="name"
					:value="value"
          mode="multiSelector">
    <slot></slot>
  </picker>

2.定义选择的地址名称

let selectVal = ['', '', '']

3.data里面的变量

  data () {
   
    return {
   
      value: [0, 0, 0],
      array: [],
      index: 0,
      allAddressArray: [],
      selectAddressId: {
   
        province_id: '',
        city_id: '',
        district_id: '',
      }
    }
  }

4.created 初始化时调用的方法

created () {
   
    this.initSelect()
  },

5.method方法

methods: {
   
    // 初始化地址选项
    initSelect () {
   
      this.getAllAddress()
    },
    // 地址控件改变控件
    columnchange (d) {
   
			this.updateSelectIndex(d.detail.column, d.detail.value) // 更新选择索引
        .updateSourceDate() // 更新源数据
        .updateAddressDate() // 更新结果数据
        .$forceUpdate()  // 触发双向绑定
    },
    getAllAddress () {
   
    	// 这里就是根据接口返回的数据，保存到allAddres