当前位置：首页 > VUE

vue实现picker联动

2026-02-18 03:51:43VUE

Vue 实现 Picker 联动

数据准备

定义联动数据源，通常为嵌套结构。例如三级联动可使用如下格式：

data() {
  return {
    options: [
      {
        label: '省份',
        children: [
          { label: '城市', children: [{ label: '区县' }] }
        ]
      }
    ],
    selectedValues: []
  }
}

组件选择

推荐使用现成组件库：

Element UI 的 Cascader 级联选择器
Vant 的 Picker 组件（移动端友好）
Ant Design Vue 的 Cascader

自定义实现

若需手动实现，核心逻辑如下：

模板结构

<select v-model="selectedProvince" @change="handleProvinceChange">
  <option v-for="item in provinces" :value="item.id">{{ item.name }}</option>
</select>

<select v-model="selectedCity" @change="handleCityChange">
  <option v-for="item in cities" :value="item.id">{{ item.name }}</option>
</select>

<select v-model="selectedDistrict">
  <option v-for="item in districts" :value="item.id">{{ item.name }}</option>
</select>

数据处理逻辑

methods: {
  handleProvinceChange() {
    this.cities = getCitiesByProvince(this.selectedProvince)
    this.selectedCity = null
    this.districts = []
  },

  handleCityChange() {
    this.districts = getDistrictsByCity(this.selectedCity)
  }
}

动态加载

对于大数据量场景可采用异步加载：

async loadChildrenOptions(selectedOption) {
  const res = await api.getChildren(selectedOption.id)
  selectedOption.children = res.data
}

表单绑定

使用 v-model 进行双向绑定：

data() {
  return {
    form: {
      region: []
    }
  }
}

注意事项

深度监听数据变化时使用 deep: true
清空子选项时应重置下级选择器
移动端需考虑触摸交互体验
大数据量建议使用虚拟滚动优化性能

完整示例（Vant Picker）

<template>
  <van-picker
    :columns="columns"
    @change="onChange"
    v-model="selectedValues"
  />
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          values: ['省份1', '省份2'],
          children: [
            { values: ['城市1-1', '城市1-2'] },
            { values: ['城市2-1', '城市2-2'] }
          ]
        }
      ],
      selectedValues: []
    }
  },
  methods: {
    onChange(picker, values) {
      picker.setColumnValues(2, ['区县数据'])
    }
  }
}
</script>

vue实现picker联动