使用VueJS实现下拉菜单联动 动态移除指定可选选项的方案咨询

实现方案 #

1. 抽离联动规则：将所有第一级选项对应的禁用科目规则单独定义为配置对象，后续新增剩余6个规则直接修改该配置即可，无需改动业务逻辑
2. 使用计算属性生成后两级下拉的可选列表，替代模板内的复杂过滤逻辑，可读性和可维护性更高
3. 监听选中值的变化，自动清空下级的选中结果，避免出现无效的选中残留
4. 修复原代码模板内错误使用this、indexOf返回值判断逻辑错误的问题

完整可运行代码

<template>
  <select v-model="one">
    <option v-for="subject in subjects" :key="subject" :value="subject">
      {{ subject }}
    </option>
  </select>
  <select v-model="two" :disabled="!one">
    <option v-for="subject in secondSubjects" :key="subject" :value="subject">
      {{ subject }}
    </option>
  </select>
  <select v-model="three" :disabled="!two">
    <option v-for="subject in thirdSubjects" :key="subject" :value="subject">
      {{ subject }}
    </option>
  </select>
  
  <div>
    Selected: {{one}} {{two}} {{three}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      subjects: [
        "Education",
        "Economics",
        "English",
        "English & Creative Writing",
        "French",
        "History",  
        "Law",
        "Marketing",
        "Mathematics",  
        "Psychology", 
        "Spanish"
      ],
      // 联动规则配置：key为第一级选中的科目，value为后两级需要禁用的科目列表
      disabledSubjectRules: {
        'Economics': ['Marketing', 'Mathematics']
        // 其余6个规则直接按格式添加即可，示例：
        // 'Mathematics': ['Marketing', 'Economics']
      },
      one: "",
      two: "",
      three: "",
    }
  },
  computed: {
    // 第二级下拉可选列表
    secondSubjects() {
      if (!this.one) return []
      const disabledList = this.disabledSubjectRules[this.one] || []
      return this.subjects.filter(item => !disabledList.includes(item))
    },
    // 第三级下拉可选列表，如需第二级也联动第三级可直接修改此处过滤逻辑
    thirdSubjects() {
      if (!this.two) return []
      const disabledList = this.disabledSubjectRules[this.one] || []
      // 如需排除第二级已选中的科目，可在过滤条件加 && item !== this.two
      return this.subjects.filter(item => !disabledList.includes(item))
    }
  },
  watch: {
    // 第一级选项变化时清空后两级选中值
    one() {
      this.two = ''
      this.three = ''
    },
    // 第二级选项变化时清空第三级选中值
    two() {
      this.three = ''
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者user13928344