element UI select选择器change事件与表格table的联动

第一次遇见这个问题,也是困扰了我很久,本来就是个很基础的问题,数组新增对象,判断是否有该对象,没有就新增,有则不变。
需求如下:select选择器多选状态下,选取谁就把谁push到对应的表格内,且表格中原有对象的数据不能变。(自己做的第一版很基础,就单纯的一个联动效果,效果如下)
如果在这里插入图片描述
实现联动主要是select选择器的change事件
这一版本就没有想到如果每次新增一个对象的时候,前一个对象的会被重新赋值,直到后来才发现;
中间采用其他方法的时候就有出现了bug在我顺着选取select选择器里面的值的时候,表格无异样,当我随机取消第一个后面的值(如2实操)再新增到表格中,就会有冲突
效果图如下
在这里插入图片描述这里就会发现是不是重复出现了一个对象且第一个还没有push进去。。。。。我不李姐😥😥😥,看了好几遍select选择器打印的数据都无异样,偏偏表格不符合,如有大神知道什么什么原因也可讲解一下,小白愿意洗耳恭听🙏🙏🙏
第二张图片是我做的最后一次有bug的表格,更多的还是希望大神们可以指导一下,虽然问题解决了,但还是在这一方面上欠缺,也希望自己下次再遇到相同问题的时候不会被自己整的bug整成无解。

最后呢,我找同事一起帮助我看这个问题,然后问题就解决了,现在无论新增还是减少,表格都不会有问题,(大家都知道select选择器返回的是一个数组,我需要每个实操的id并且通过这个id对比查找下拉菜单这个数组,返回对应的名字和id,也就是表格需要的对象)
自己最终的解决代码放在下面了,欢迎大神指点

subjectIdList: [
  { key: "asfdgertge1", value: "1实操" },
  { key: "ferwdf34625", value: "2实操" },
  { key: "eawr346gr5g", value: "23实操" },
 ],
changeMultiple(val) {
if (val.length != 0) {
	//  表格数据增加判断
	if (val.length > this.classList.length) {
		var list = [];
		this.subjectIdList.forEach((item) => {
		if (val.indexOf(item.key) > -1) {
    		list.push(item);
		}
		});
	
		if (this.classList.length) {
			list.map((item) => {
        		var flag = false;
            	for (let i of this.classList) {
            		if (item.key == i.courseId) {
                    	flag = true;
                  	}
             	}
            	if (!flag) {
            		this.classList.push({
                		courseId: item.key,
                		courseName: item.value,
                		menuModel: 1,
                    	classHourModel: 1,
                    	limitHour: true,
                    	courseMinute: null,
                    	courseNum: null,
                    	status: true, // 控制删除
                    	deleted: false,
                  	});
                 }
              });
            } else {
              this.classList = [
                {
                  courseId: list[0].key,
                  courseName: list[0].value,
                  menuModel: 1,
                  classHourModel: 1,
                  limitHour: true,
                  courseMinute: null,
                  courseNum: null,
                  status: true,
                  deleted: false,
              	},
         	];
      	}
      }
      	// 减少数据表格判断
      if (val.length < this.classList.length) {
      		var bb = [];
      		this.subjectIdList.map((item) => {
              if (val.indexOf(item.key) == -1) {
                bb.push(item.key);
              }
            });
            bb = Array.from(new Set(bb));
            var arr = [];
            this.classList.forEach((a) => {
              if (bb.indexOf(a.courseId) == -1) {
                arr.push(a);
              }
            });
            this.classList = arr;
      	}
	}else{
		this.classList=[]
	}
},

以上就是实现成功的代码,给数组新增对象且不会改变原数组其他对象的值,并且也不会出现我之前的那种情况了😰
如果有其他想法的可以留言,我参考参考丰富自己的阅历及经验,也感谢我的同事帮的忙

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值