vue实现下拉联动

Vue 实现下拉联动

使用 Vue 实现下拉联动功能可以通过数据绑定和事件监听来完成。以下是一个常见的实现方式：

数据准备

在 Vue 的 data 中定义两个下拉框的数据和选中的值：

data() {
  return {
    firstOptions: ['选项1', '选项2', '选项3'],
    secondOptions: [],
    selectedFirst: '',
    selectedSecond: ''
  }
}

监听第一个下拉框变化

通过 v-model 绑定第一个下拉框的值，并监听其变化事件：

<select v-model="selectedFirst" @change="updateSecondOptions">
  <option value="">请选择</option>
  <option v-for="option in firstOptions" :value="option">{{ option }}</option>
</select>

更新第二个下拉框选项

在 methods 中定义方法，根据第一个下拉框的选择更新第二个下拉框的选项：

methods: {
  updateSecondOptions() {
    // 清空第二个下拉框的值
    this.selectedSecond = ''

    // 根据第一个下拉框的选择设置第二个下拉框的选项
    if (this.selectedFirst === '选项1') {
      this.secondOptions = ['子选项1-1', '子选项1-2']
    } else if (this.selectedFirst === '选项2') {
      this.secondOptions = ['子选项2-1', '子选项2-2']
    } else {
      this.secondOptions = []
    }
  }
}

渲染第二个下拉框

使用 v-for 渲染第二个下拉框，并绑定其值：

<select v-model="selectedSecond">
  <option value="">请选择</option>
  <option v-for="option in secondOptions" :value="option">{{ option }}</option>
</select>

完整示例

<template>
  <div>
    <select v-model="selectedFirst" @change="updateSecondOptions">
      <option value="">请选择</option>
      <option v-for="option in firstOptions" :value="option">{{ option }}</option>
    </select>

    <select v-model="selectedSecond">
      <option value="">请选择</option>
      <option v-for="option in secondOptions" :value="option">{{ option }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstOptions: ['选项1', '选项2', '选项3'],
      secondOptions: [],
      selectedFirst: '',
      selectedSecond: ''
    }
  },
  methods: {
    updateSecondOptions() {
      this.selectedSecond = ''
      if (this.selectedFirst === '选项1') {
        this.secondOptions = ['子选项1-1', '子选项1-2']
      } else if (this.selectedFirst === '选项2') {
        this.secondOptions = ['子选项2-1', '子选项2-2']
      } else {
        this.secondOptions = []
      }
    }
  }
}
</script>

使用计算属性优化

可以使用计算属性来优化第二个下拉框的选项逻辑：

computed: {
  filteredSecondOptions() {
    if (!this.selectedFirst) return []
    const optionsMap = {
      '选项1': ['子选项1-1', '子选项1-2'],
      '选项2': ['子选项2-1', '子选项2-2']
    }
    return optionsMap[this.selectedFirst] || []
  }
}

然后在模板中直接使用计算属性：

<select v-model="selectedSecond">
  <option value="">请选择</option>
  <option v-for="option in filteredSecondOptions" :value="option">{{ option }}</option>
</select>

这种方法减少了手动更新选项的逻辑，使代码更加简洁。