Vue 多个select 不能重复选择相同value的数据_选择框不能选择重复值vue-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45895806/article/details/116294302

本文介绍了如何使用Vue的计算属性Computed来解决在多个Select组件中避免重复选择相同值的问题，通过创建独立的选项列表和实时更新状态，确保不同下拉框的选择互不影响。作者分享了代码实现和关键逻辑，适用于前端开发人员参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发过程经常会碰到多个Select同样的选项,选择后其他select不能继续选择,整合了两种类别的需求呈现方式

第一种，不能重复选择相同value的数据，选择后其他select移出该项

前言
1.功能的实现是基于vue的计算属性computed
2.个人感觉vue的计算属性computed挺适合做这个功能的，因为通过计算属性return的值可以保证相对独立，又可以在其依赖的属性的值发生变化时进行重新计算。
3.是偶然间想到用计算属性来完成这个功能，怕自己忘了所以写在博客这里当总结，同时也希望笔者的想法能给大家带来一点启发

效果图演示
在这里插入图片描述

实现逻辑
（具体的实现逻辑我写在了代码的注释里了，这里就写下核心的逻辑）
1.保证每个下拉框的Option循环的cityList都是独立的，不会影响到其他的下拉框
2.把所有Select已经选中的选项放入一个数组arr中
3.所有的Option的显示数据cityList，需要保留当前自己Select选中的选项，再去除在arr中已经有的选项
代码

<template>
  <div id="app">
    <div v-for="(item,index) in selectList" :key="index">
      <Select v-model="item.value" style="width:200px">
        <Option
          v-for="it in showCityList(item.value)"
          :value="it.value"
          :key="it.value"
        >{
   {
    it.label }}</Option>
      </Select>
      <Button icon="md-add-circle" @click="listAdd()"></Button>
      <Button icon="md-trash" @click="listDelete()"></Button>
    </div>
  </div>
</template>


```javascript
<script