vue实现select级联

Vue 实现 Select 级联

使用 v-model 和 watch 监听变化

在 Vue 中，可以通过 v-model 绑定数据，并使用 watch 监听选项变化来更新下级选项。以下是一个简单的示例：

<template>
  <div>
    <select v-model="selectedProvince" @change="updateCities">
      <option v-for="province in provinces" :value="province.id">{{ province.name }}</option>
    </select>
    <select v-model="selectedCity">
      <option v-for="city in cities" :value="city.id">{{ city.name }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      provinces: [
        { id: 1, name: '北京' },
        { id: 2, name: '上海' }
      ],
      cities: [],
      selectedProvince: null,
      selectedCity: null
    }
  },
  methods: {
    updateCities() {
      // 根据选中的省份更新城市列表
      this.cities = this.getCitiesByProvince(this.selectedProvince)
      this.selectedCity = null // 重置城市选择
    },
    getCitiesByProvince(provinceId) {
      // 模拟根据省份获取城市数据
      const cityData = {
        1: [
          { id: 101, name: '东城区' },
          { id: 102, name: '西城区' }
        ],
        2: [
          { id: 201, name: '黄浦区' },
          { id: 202, name: '徐汇区' }
        ]
      }
      return cityData[provinceId] || []
    }
  }
}
</script>

使用计算属性优化

对于简单的级联关系，可以使用计算属性来动态生成下级选项：

<template>
  <div>
    <select v-model="selectedCategory">
      <option v-for="category in categories" :value="category.id">{{ category.name }}</option>
    </select>
    <select v-model="selectedSubCategory">
      <option v-for="sub in subCategories" :value="sub.id">{{ sub.name }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categories: [
        { id: 1, name: '电子产品', subs: [
          { id: 11, name: '手机' },
          { id: 12, name: '电脑' }
        ]},
        { id: 2, name: '服装', subs: [
          { id: 21, name: '男装' },
          { id: 22, name: '女装' }
        ]}
      ],
      selectedCategory: null,
      selectedSubCategory: null
    }
  },
  computed: {
    subCategories() {
      const category = this.categories.find(c => c.id === this.selectedCategory)
      return category ? category.subs : []
    }
  }
}
</script>

使用第三方组件库

对于更复杂的级联选择，可以考虑使用现成的组件库：

1. Element UI 的 Cascader 组件：

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

export default { data() { return { selectedOptions: [], options: [{ value: 'zhinan', label: '指南', children: [{ value: 'shejiyuanze', label: '设计原则' }] }] } }, methods: { handleChange(value) { console.log(value) } } } ```

1. Ant Design Vue 的 Cascader 组件：

   <template>
   <a-cascader
    v-model="value"
    :options="options"
    placeholder="请选择"
    @change="onChange"
   />
   </template>

动态加载数据

对于大数据量的级联选择，可以实现动态加载：

<template>
  <select v-model="level1" @change="loadLevel2">
    <option v-for="item in level1Data" :value="item.id">{{ item.name }}</option>
  </select>
  <select v-model="level2" @change="loadLevel3" :disabled="!level1">
    <option v-for="item in level2Data" :value="item.id">{{ item.name }}</option>
  </select>
  <select v-model="level3" :disabled="!level2">
    <option v-for="item in level3Data" :value="item.id">{{ item.name }}</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      level1: null,
      level2: null,
      level3: null,
      level1Data: [],
      level2Data: [],
      level3Data: []
    }
  },
  mounted() {
    this.loadLevel1()
  },
  methods: {
    async loadLevel1() {
      this.level1Data = await this.fetchData('/api/level1')
    },
    async loadLevel2() {
      this.level2Data = await this.fetchData(`/api/level2?parent=${this.level1}`)
      this.level2 = null
      this.level3 = null
    },
    async loadLevel3() {
      this.level3Data = await this.fetchData(`/api/level3?parent=${this.level2}`)
      this.level3 = null
    },
    fetchData(url) {
      // 实际项目中替换为真实的API调用
      return Promise.resolve([])
    }
  }
}
</script>

表单验证

如果级联选择是表单的一部分，可以添加验证规则：

<template>
  <form @submit.prevent="submit">
    <select v-model="form.region" required>
      <option value="">请选择地区</option>
      <option v-for="r in regions" :value="r.id">{{ r.name }}</option>
    </select>
    <select v-model="form.city" :disabled="!form.region" required>
      <option value="">请选择城市</option>
      <option v-for="c in cities" :value="c.id">{{ c.name }}</option>
    </select>
    <button type="submit">提交</button>
  </form>
</template>

以上方法可以根据实际需求选择或组合使用，实现不同复杂度的级联选择功能。