vue实现picker联动

Vue 实现 Picker 联动

在 Vue 中实现 Picker 联动通常涉及多个选择器之间的数据依赖关系。以下是一种常见的实现方式：

数据准备

定义数据模型，包括所有可能的选择项和当前选中的值：

data() {
  return {
    provinces: [],
    cities: [],
    districts: [],
    selectedProvince: '',
    selectedCity: '',
    selectedDistrict: ''
  }
}

初始化数据

在 created 或 mounted 钩子中加载初始数据：

async mounted() {
  const res = await axios.get('/api/provinces')
  this.provinces = res.data
}

监听变化

使用 watch 监听选择变化并更新下级数据：

watch: {
  selectedProvince(newVal) {
    if (newVal) {
      this.fetchCities(newVal)
      this.selectedCity = ''
      this.selectedDistrict = ''
    }
  },
  selectedCity(newVal) {
    if (newVal) {
      this.fetchDistricts(newVal)
      this.selectedDistrict = ''
    }
  }
}

获取下级数据

定义获取下级数据的方法：

methods: {
  async fetchCities(provinceId) {
    const res = await axios.get(`/api/cities?province=${provinceId}`)
    this.cities = res.data
  },
  async fetchDistricts(cityId) {
    const res = await axios.get(`/api/districts?city=${cityId}`)
    this.districts = res.data
  }
}

模板部分

在模板中使用 select 或自定义 Picker 组件：

<select v-model="selectedProvince">
  <option value="">请选择省份</option>
  <option v-for="item in provinces" :value="item.id">{{ item.name }}</option>
</select>

<select v-model="selectedCity" :disabled="!selectedProvince">
  <option value="">请选择城市</option>
  <option v-for="item in cities" :value="item.id">{{ item.name }}</option>
</select>

<select v-model="selectedDistrict" :disabled="!selectedCity">
  <option value="">请选择区县</option>
  <option v-for="item in districts" :value="item.id">{{ item.name }}</option>
</select>

使用第三方组件库

如果使用 Element UI 等组件库，实现方式类似：

<el-cascader
  :options="options"
  v-model="selectedValues"
  @change="handleChange"
></el-cascader>

移动端 Picker 实现

对于移动端，可以使用 vant 的 Picker 组件：

<van-picker
  title="请选择"
  show-toolbar
  :columns="columns"
  @confirm="onConfirm"
  @cancel="onCancel"
/>

性能优化

对于大数据量的 Picker，建议：

• 实现懒加载
• 添加防抖处理
• 使用虚拟滚动

以上方法可以根据具体需求进行调整和组合使用，实现不同场景下的 Picker 联动效果。