Vue实现多下拉框无重复可选功能的开发问题求助

问题原因 #

你遇到的问题根源是所有下拉框共用同一个全局可选列表，该列表排除了所有已经被选中的选项，所以已经选中某选项的下拉框会因为列表里找不到对应选项而显示空白。

解决思路 #

不需要维护全局的可选列表，改为给每个下拉框单独计算可选范围：可选选项 = 全部选项 - 其他下拉框已经选中的选项。这样当前下拉框自己选中的选项会一直保留在自身的可选列表中，不会消失，同时也不会出现在其他下拉框的可选列表里。

修改后完整代码 #

JS 逻辑

var app = new Vue({
  el: "#app",
  data: {
    options: [],
    items: []
  },
  mounted() {
    this.options = [
      { name: "Option 1", value: 1 },
      { name: "Option 2", value: 2 },
      { name: "Option 3", value: 3 },
      { name: "Option 4", value: 4 },
      { name: "Option 5", value: 5 },
      { name: "Option 6", value: 6 }
    ];
  },
  computed: {
    // 自动计算所有已选值，依赖items变化自动更新，无需手动维护
    selectedValueArray() {
      return this.items.map(item => item.value).filter(val => val !== 0)
    }
  },
  methods: {
    addItem() {
      this.items.push({ value: 0 });
    },
    removeItem(index) {
      this.$delete(this.items, index);
    },
    // 给单个下拉框计算专属可选列表，传入当前下拉框已选的值
    getSelectableOptions(currentVal) {
      return this.options.filter(option => {
        // 规则：当前下拉框自己选的值保留，其余已被其他下拉框选中的值排除
        return option.value === currentVal || !this.selectedValueArray.includes(option.value)
      })
    }
  }
})

HTML 结构

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(item, index) in items" :key="index">
    <select v-model="item.value">
      <option :value="0" disabled>请选择</option>
      <option 
        v-for="option in getSelectableOptions(item.value)" 
        :key="option.value" 
        :value="option.value"
      >
        {{option.name}}
      </option>
    </select>
    <button @click="removeItem(index)">Remove this item</button>
  </div>
  <button @click="addItem">Add new item</button>
</div>

效果验证 #

• 任意下拉框选中某个选项后，其他下拉框的可选列表不会再出现该选项
• 已选中选项的下拉框会正常展示选中的内容，不会空白
• 删除某一行后，该行对应的选中选项会自动恢复到所有下拉框的可选列表中
• 切换某一行的选中选项后，原选项会自动恢复可选，新选中的选项会从其他下拉框的可选列表中移除

内容的提问来源于stack exchange，提问作者Huy Phạm