uniapp下拉连级选择器

uniApp的下拉联动选择器通常是指一种组件，它允许用户在一个列表（通常是上级选项）中做出选择，然后基于这个选择动态加载另一个相关的下级列表供进一步选择。这种设计常用于数据层级结构中，比如地区选择，一级是省份，二级是城市。

在uniApp框架中，你可以使用`<u-select>`组件来创建基本的单选选择器，并结合`<u-option-group>`组件来实现下拉联动的效果。例如，首先设置一个省级别的`<u-select>`，当用户选择某个省份后，可以通过绑定`v-model`和`load-data`属性来异步加载该省份下的城市列表。

以下是一个简单的例子：

<u-select v-model="province" @change="loadCities">
  <u-option-group>
    <template v-for="(item, index) in provinces">
      <u-option :value="item.value">{{ item.label }}</u-option>
    </template>
  </u-option-group>
</u-select>

<u-select v-model="city" :disabled="!province" style="display: none;">
  <template v-for="cityItem in cities">
    <u-option :value="cityItem.value">{{ cityItem.label }}</u-option>
  </template>
</u-select>

<script>
export default {
  data() {
    return {
      province: '',
      cities: [],
      provinces: [
        { value: '省1', label: '省1' },
        // 其他省份...
      ]
    };
  },
  methods: {
    loadCities(provinceValue) {
      this.$http.get(`/api/cities?province=${provinceValue}`).then(response => {
        this.cities = response.data;
        if (this.province) {
          this.$refs.city.select();
        }
      });
    }
  }
};
</script>