uview2.0的u-picker组件实现省市二级联动

u-picker组件是uView UI框架中的一个选择器组件，用于选择单个或多个值。要实现省市二级联动，需要引入省市数据源，并将其传递给u-picker组件。

以下是实现步骤：

1. 引入省市数据源

在uView官网下载省市数据源（https://www.uviewui.com/components/picker.html#%E7%9C%81%E5%B8%82%E5%8C%BA%E9%95%BF%E9%80%89%E6%8B%A9%E5%99%A8%EF%BC%88%E4%BA%8C%E7%BA%A7%E8%81%94%E5%8A%A8%EF%BC%89），并将其放到项目中。

2. 在页面中引入u-picker组件

<template>
  <view>
    <u-picker ref="picker" :title="'请选择省市'" :data="data" @confirm="onConfirm"></u-picker>
  </view>
</template>

<script>
import uPicker from '@/uview-ui/components/u-picker/u-picker.vue'

export default {
  components: {
    uPicker
  },
  data() {
    return {
      data: []
    }
  },
  mounted() {
    this.loadCityData()
  },
  methods: {
    loadCityData() {
      // 引入省市数据源并解析
      const cityData = require('@/static/city.json')
      let data = []
      cityData.forEach(province => {
        let cities = []
        province.children.forEach(city => {
          cities.push({text: city.name, value: city.name})
        })
        data.push({
          text: province.name,
          children: cities
        })
      })
      this.data = data
    },
    onConfirm(selected) {
      console.log('selected', selected)
    }
  }
}
</script>

3. 在onConfirm方法中获取选择结果

onConfirm(selected) {
  console.log('selected', selected)
}

以上代码实现了省市二级联动的u-picker组件。在选择省份后，会自动加载该省份下的城市列表，并且可以选择其中一个城市。