首页 > 其他分享 >Vue2/3 实现动态循环的select下拉框去重功能:

Vue2/3 实现动态循环的select下拉框去重功能:

时间:2024-03-15 09:14:29浏览次数:33  
标签:arr return value label item Vue2 下拉框 select

需求:
    前面下拉框选择某个选项(如:1)了,
    后面的下拉框不能在有前面选中内容的该选项(即不能在出现1的下拉选项)
    【Vue 实现动态循环出的多个select 不能重复选择相同的数据】
    
    注:下面注释的都可以根据需求更改

 

代码

<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>

测试数据

data() {
    return {
      selectList: [{ value: "" }],
      cityList: [
        {
          value: "New York",
          label: "New York"
        },
        {
          value: "London",
          label: "London"
        },
        {
          value: "Sydney",
          label: "Sydney"
        },
        {
          value: "Ottawa",
          label: "Ottawa"
        },
        {
          value: "Paris",
          label: "Paris"
        },
        {
          value: "Canberra",
          label: "Canberra"
        }
      ]
    };
  },

 

事件

 methods: {
    listAdd() {
      if (this.selectList.length < this.cityList.length) {
        this.selectList.push({
          value: ""
        });
      } else {
        console.log("不能再加啦");
      }
    },
    listDelete(index) {
      this.selectList.splice(index, 1);
    }
  },

 

实现部分:

computed: {
    showCityList() {
      return (val) => {
        //讲option的显示数据进行深拷贝
        let newList = JSON.parse(JSON.stringify(this.cityList));

        //处理selectList数据,返回一个新数组arr
        //arr数组就相当于所有Select选中的数据集合(没有选中的为'',不影响判断),只要在这个集合里面,其他的下拉框就不应该有这个选项
        const arr = this.selectList.map(item => {
          //将其格式{value:'NewYork'}变成['NewYork'],方便使用indexOf进行判断
          return (item = item.value);
        });

        //过滤出newList里面需要显示的数据
        newList = newList.filter(item => {
          //当前下拉框的选中的数据需要显示
          //val就是当前下拉框选中的值
          if (val == item.value) {
            return item;
          } else {
            //再判断在arr这个数组中是不是有这个数据,如果不在,说明是需要显示的
            if (arr.indexOf(item.value) == -1) {
              return item;
            }
          }
        });

        //返回Options显示数据
        return newList;
      };
    }
  }

在整个showCityList中,唯一的变量就是selectList,只要selectList的值有改变,就会触发计算属性的重新计算,这样就可以保证无论是Select选中某个选项,还是增加下拉框,或者删除下拉框都会让每个下拉框对应的Option中的newList进行重新生成,从而达到多个select不能重复选择相同数据的功能。
———————————————————————————————————————————————————————————————————————————————

Vue 3 实现代码:

 <div v-for="(item, index) in tableData.list" class="form-div">
          <Row :gutter="10">
            <Col :span="6">
              <FormItem
                :name="['list', index, 'temqProjectid']"
                :rules="[{ required: true, message: '请选择项目', trigger: 'change' }]"
              >
                <Select
                  v-model:value="item.temqProjectid"
                  style="width: 100%"
                  :showSearch="true"
                  allow-clear
                  placeholder="请选择项目"
                >
                  <Option
                    v-for="it in showCityList(item.temqProjectid)"
                    :value="it.value"
                    :key="it.value"
                    >{{ it.label }}</Option
                  >
                </Select>
              </FormItem>
            </Col>
           
          </Row>
        </div>






 const selectList = ref([{ value: '' }]); // [{ value: '' }];
  let cityList = [
    {
      value: 'New York',
      label: 'New York',
    },
    {
      value: 'London',
      label: 'London',
    },
    {
      value: 'Sydney',
      label: 'Sydney',
    },
    {
      value: 'Ottawa',
      label: 'Ottawa',
    },
    {
      value: 'Paris',
      label: 'Paris',
    },
    {
      value: 'Canberra',
      label: 'Canberra',
    },
  ];

  const showCityList = (val) => {
    //讲option的显示数据进行深拷贝
    let newList = JSON.parse(JSON.stringify(cityList));
    //alert(val);

    //处理selectList数据,返回一个新数组arr
    //arr数组就相当于所有Select选中的数据集合(没有选中的为'',不影响判断),只要在这个集合里面,其他的下拉框就不应该有这个选项
    // const arr = selectList.value.map((item) => {
    //   //将其格式{value:'NewYork'}变成['NewYork'],方便使用indexOf进行判断
    //   return (item = item.value);
    // });
    const arr = tableData.value.list.map((item) => {
      //将其格式{value:'NewYork'}变成['NewYork'],方便使用indexOf进行判断
      return (item = item.temqProjectid);
    });
    //alert(index + '>>' + val + '>>arr>>' + JSON.stringify(arr));

    //过滤出newList里面需要显示的数据
    newList = newList.filter((item) => {
      //当前下拉框的选中的数据需要显示
      //val就是当前下拉框选中的值
      if (val == item.value) {
        return item;
      } else {
        //再判断在arr这个数组中是不是有这个数据,如果不在,说明是需要显示的
        if (arr.indexOf(item.value) == -1) {
          return item;
        }
      }
    });

    //返回Options显示数据
    return newList;
  };

 

标签:arr,return,value,label,item,Vue2,下拉框,select
From: https://www.cnblogs.com/Fooo/p/18074423

相关文章

  • vue2播放音频组件mp3
    贴代码直接使用,配合了el-slider组件完成父组件data(){return{queryParams{visitTapesList:[{url:'xxxxxx'},{url:'xxxxxx'},{url:'xxxxxx'}]}}}<Audiov-for="(item,inde......
  • 《手把手教你》系列技巧篇(三十二)-java+ selenium自动化测试-select 下拉框(详解教程)
    1.简介 在实际自动化测试过程中,我们也避免不了会遇到下拉选择的测试,因此宏哥在这里直接分享和介绍一下,希望小伙伴或者童鞋们在以后工作中遇到可以有所帮助。2.select下拉框2.1Select类1.在Selenium中,针对html的标签select多选下拉列表有几种方法:selectByIndex(index);......
  • Vue2.x笔记:组件通信
    一、插槽slot插槽(slot)是一种Vue中组件通信的方式,主要用于父组件向子组件传递自定义内容。有三种插槽:默认插槽:最基本的插槽,没有任何标识,每个子组件只能定义一个具名插槽:具有name属性的默认插槽,每个子组件可以定义多个作用域插槽:子组件提供数据,由父组件决定其渲染方式1.默......
  • 基于Vue(提供Vue2/Vue3版本)和.Net Core前后端分离、跨平台的快速开发框架
    前言今天大姚给大家推荐一款基于Vue(提供Vue2/Vue3版本)和.NetCore前后端分离、开源免费(MITLicense)、强大、跨平台的快速开发框架,并且框架内置代码生成器(解决重复性工作,提高开发效率),支持移动端(iOS/Android/H5/微信小程序):Vue.NetCore。提高开发生产效率、避免996可以考虑试试这......
  • redis自学(16)select
    Selectselect是Linux中最早的I/O多路复用实现方案:  nfds是FD遍历的一个上限,遍历到这个值的时候,就意味着不用再往后去遍历了。fds_bits是存储1024个比特位,代表1024个fd,这个数量是__d_mask四个字节共32个比特位乘以fds_bits的32长度得到的Select的执行流程:  根据fd......
  • uni-forms 和 uni-data-select 嵌套使用设定必填但初始化时不校验
    使用 uni-forms-item和 uni-data-select嵌套时,首先要注意的是:name=[]属性必须使用动态绑定,而且数组中的字符串必须和v-model的属性完全相同,如v-model="formatStationInfo.requiredSelect[index].curValue":name="['requiredSelect',index,'curValue']" :......
  • 第03章_基本的SELECT语句
    第03章_基本的SELECT语句讲师:尚硅谷-宋红康(江湖人称:康师傅)官网:http://www.atguigu.com1.SQL概述1.1SQL背景知识1946年,世界上第一台电脑诞生,如今,借由这台电脑发展起来的互联网已经自成江湖。在这几十年里,无数的技术、产业在这片江湖里沉浮,有的方兴未艾,有的已经几幕兴衰......
  • vue2接入paypal支付
     paypal支付,官网实例引入cdn在加载该组件时就读取脚本data(){return{clientId:'AbJmdo6IqMHBMfgJVP-qWfFacVBBDOE45hOJGp8_XpZ1uq4ytOzOPDX4jw2p0pUTPmNptRA40BEqgdXf',//paypal客户端id};},mounted(){this.initScript()},methods:{......
  • el-select内嵌在el-table中时,select下拉弹出框看不见的问题处理
    el-select内嵌在el-table中时,select下拉弹出框看不见的问题处理,项目中遇到用到el-select内嵌在表格的一个tdcell中,起先是下拉框会随着页面的滚动而位置移动,这是因为popper-append-to-body默认为true引起的,查阅之后,把它改为了false就可以了,可是这个时候发现,el-select点击展开,下......
  • vue2项目中不能直接在store中声明响应式变量,vue3项目中能在store中直接声明响应式变量
    vue2项目中不能直接在store中声明响应式变量,vue3项目中能在store中直接声明响应式变量,页面元素也会响应式生效在Vue2项目中,store中的状态默认情况下是不具备响应式的特性的。这是因为Vue2.x使用的是基于对象定义的Vue.observable()来创建响应式对象,而store中的状态是通......