已经被选择的数据不能再被选择js_js复选框已选中的目标不可再选-优快云博客

本文链接：https://blog.youkuaiyun.com/c6812/article/details/134182447

文章描述了如何在Vue.js应用中，实现一个选择不同价格下的苹果数量的功能，其中已选择的价格选项会被禁选，用户可以点击添加按钮新增一行。主要涉及el-select组件的v-model绑定和数据处理。

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

已经选择的数据不能被选择js

举个例子

在这里插入图片描述

场景：选择不同价格下的苹果数量，已经被选择的价格不能被选择，点击+，新增一行

初始：

在这里插入图片描述

实现效果：

在这里插入图片描述
`

基础思路

页面

<div style="display: flex;flex-direction: column;">
   <div v-for="item in fruitBase" style="display: flex;margin-bottom: 10px;">
     <div style="width: 50px;">苹果：</div>
     <el-select v-model="item.price" value-key="id" style="width: 280px;margin: 0 18px;"     @change="change">
       <el-option v-for="el in item.optionaList" :key="el.id" :label="el.price" :value="el"></el-option>
     </el-select>
     <div style="width: 50px;">数量：</div>
     <el-input v-model="item.num" style="width: 200px;" clearable/>
   </div>
 </div>

// 所有数据
 const fruitBase = ref([{}])
// 价格数据
 const baseArr = ref([])
  baseArr.value = [
    {id:1,price:'12.8',name:'苹果'},
    {id:2,price:'9.8',name:'苹果'},
    {id:3,price:'15.8',name:'苹果'},
    {id:4,price:'16.8',name:'苹果'},
    {id:5,price:'14.8',name:'苹果'},
  ]
 const change = ()=>{
  updateSelectLdList(fruitBase.value)
 }
 const add = ()=>{
   fruitBase.value.push({})
   updateSelectLdList(fruitBase.value)
 }
//更新待选择价格列表
 const updateSelectLdList = (data)=>{
   //遍历输出所有列表
   data.forEach(tobesetElement => {
     //所有价格
     let list = JSON.parse(JSON.stringify(baseArr.value));
     data.forEach(element => {
       //筛选价格列表中其他行选中的价格
       if(tobesetElement != element){
         //如果其他行已选中，则从list中删除
         if(element.price!= null){
          // 单项下拉
           let id = element.price.id
           const index = list.findIndex(obj =>{
             return obj.id === id
           })
           if (index!=-1) {
             list.splice(index,1)
           }
            // 多选下拉
           // let didList = element.price.map(item => item.id);
           // didList.forEach(selectid => {
           //   const index = list.findIndex(obj =>{
           //     return obj.id === selectid
           //   })
           //   if (index!=-1) {
           //     list.splice(index,1)
           //   }
           // });
         }
       }
     });
     tobesetElement.optionaList = list
   });
 }