uni-app使用uView2.x组件实现实现省市区三级联动

一.数据格式

export const address= [{
  "code": "110000",
  "value": "北京市",
  "children": [{
    "code": "110100",
    "value": "北京市",
    "children": [{
      "code": "110101",
      "value": "东城区"
    }, {
      "code": "110102",
      "value": "西城区"
      }
      ......
      ]
   }]
 }]

二.template主要部分

<u-picker
	:show="show"
	ref="uPicker"
	:columns="columns"
	@confirm="confirm"
	@cancel="show=false"
	@change="changeHandler"
></u-picker>

• columns:主要的数据
  columns: [ [‘中国’, ‘美国’],[‘深圳’, ‘厦门’, ‘上海’, ‘拉萨’]],
• changeHandler:根据数据的变化而对应变化
• setColumnValues：设置对应列的值

   // 当第一列值发生变化时，变化第二列(后一列)对应的选项
         if (columnIndex === 0) {
             // picker为选择器this实例，变化第二列对应的选项
               picker.setColumnValues(1, value)
          }
  

三.效果图

选中后显示所选择的地址（格式自己设置）

eg：中间用-连接

下载地址链接: Demo免费下载