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

文章描述了如何在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
   });
 }
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值