当前位置：首页 > VUE

vue实现选择联动

2026-02-19 02:07:20VUE

Vue 实现选择联动的方法

数据绑定与监听

在Vue中实现选择联动通常基于v-model和watch或computed属性。通过双向绑定第一个选择框的值，监听其变化动态更新第二个选择框的选项。

<template>
  <div>
    <select v-model="selectedProvince">
      <option v-for="p in provinces" :value="p.id">{{ p.name }}</option>
    </select>
    <select v-model="selectedCity">
      <option v-for="c in cities" :value="c.id">{{ c.name }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      provinces: [{id: 1, name: '广东'}, {id: 2, name: '江苏'}],
      cities: [],
      selectedProvince: null,
      selectedCity: null
    }
  },
  watch: {
    selectedProvince(newVal) {
      this.cities = this.getCitiesByProvince(newVal)
    }
  },
  methods: {
    getCitiesByProvince(provinceId) {
      // 模拟根据省份获取城市
      const cityData = {
        1: [{id: 101, name: '广州'}, {id: 102, name: '深圳'}],
        2: [{id: 201, name: '南京'}, {id: 202, name: '苏州'}]
      }
      return cityData[provinceId] || []
    }
  }
}
</script>

使用计算属性优化

对于简单的联动逻辑，计算属性比watch更简洁：

computed: {
  filteredCities() {
    return this.getCitiesByProvince(this.selectedProvince)
  }
}

多级联动实现

三级联动（如省-市-区）可通过嵌套数据结构和多级监听实现：

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

异步数据加载

当选项数据需要从API获取时，使用async/await：

methods: {
  async loadCities() {
    this.cities = await axios.get(`/api/cities?province=${this.selectedProvince}`)
  }
}

组件化封装

对于复用场景，可封装为独立组件：

<template>
  <cascade-select 
    :levels="['province', 'city', 'district']" 
    @change="handleChange"
  />
</template>

注意事项

初始化时应设置默认选中项避免空值
清除下级选项时需重置v-model绑定值
大数据量时考虑虚拟滚动优化性能
移动端可使用<picker-view>等专用组件

vue实现选择联动

标签: vue

分享给朋友：

vue实现a4打印模板

使用Vue实现A4打印模板在Vue中实现A4打印模板需要结合CSS的打印样式和Vue的模板渲染能力。以下是具体实现方法：设置A4纸张尺寸在CSS中定义A4纸张的标准尺寸（210mm × 297…

vue实现socket

Vue 中实现 WebSocket 通信在 Vue 项目中实现 WebSocket 通信可以通过原生 WebSocket API 或第三方库（如 socket.io-client）完成。以下是两种常…

vue实现节流

vue实现节流的方法在Vue中实现节流（throttle）功能，通常用于限制高频事件的触发频率，例如滚动、输入或按钮点击。以下是几种常见的实现方式：使用Lodash的throttle函数安装L…

vue 实现回复

Vue 实现回复功能在 Vue 中实现回复功能通常涉及表单提交、数据绑定和列表渲染。以下是实现步骤和代码示例：数据绑定与表单 <template> <div>…

vue实现海报

Vue 实现海报生成方案使用 html2canvas 库 html2canvas 是一个将 HTML 元素转换为 Canvas 的库，适合将 Vue 组件渲染为海报图片安装依赖： npm…

vue实现开关

Vue 实现开关组件的方法使用原生HTML和Vue数据绑定通过v-model绑定复选框的checked状态，结合CSS样式实现开关效果： <template> <label…

vue实现选择联动