首页 > 其他分享 >大二暑期实习记录(一):处理组件绑定数据错误(数组解构,map()方法)

大二暑期实习记录(一):处理组件绑定数据错误(数组解构,map()方法)

时间:2023-07-31 18:58:02浏览次数:41  
标签:map return ... 绑定 暑期 解构 item model options

好家伙,搬砖

 

今天在做组件迁移(从一个旧平台迁移到一个新平台)的时候,发现了一些小小的问题:

 

1.错误描述:

在穿梭框组件中,使用"节点配置"方法添加数据的时候,左测数据选择框直接消失了

这里我们猜测一下,大概是数据处理出了问题

此处,我们使用"数据绑定"绑定数据方法:

 

 定义数据:

 

绑定数据

 

2.错误分析

此时我们去看看"节点配置"方法和"数据绑定"绑定的数据长什么样子

后面对比两组数据

options                             variablee

                

到这里大概能看出问题来了,显然左边的数据多包了一层"model"

大概写个map()就能搞定

 

3.源码定位

那么,我们去翻该组件的源码:

哇塞,公司的人能敲出这么漂亮的组件,真是太厉害了

 

 .....

emmmm...

 

Element-UI,不愧是你啊

 

好了,回到正题

 

4.修改错误

此处我们直接定位到数据相关的核心部分

组件绑值

:data="(dataType == 'def' ? optionConfig : options)"

("def"对应"节点配置","cus"对应"数据绑定")

 

数据props:

props: {
  optionConfig: {
    type: [String, Object, Array],
    default: () => {
      return []
    }
  },
  options: {
    type: [Array, String, Object],
    default: () => {
      return []
    }
  },
}

 

也就是说,此处options中的数据没有经过处理就直接拿去使用了,那么我们只需要加上处理就好

我们使用计算属性,对数据进行一个预处理

computed: {
    optionsnext: {
      get() {
        let temp = [];
        temp = this.options?.map((item) => {
          return {
            ...item,
            disabled: item.model["disabled"],
            key: item.model["key"],
            label: item.model["label"],
          };
        }) ?? []
        return temp;
      }
    },
}

 

随后再把它绑上

:data="(dataType == 'def' ? optionConfig : optionsnext)"

 

看看效果,

 搞定!

 

 5.代码解释

 

computed: {
    optionsnext: {
      get() {
        let temp = [];
        temp = this.options?.map((item) => {
          return {
            ...item,
            disabled: item.model["disabled"],
            key: item.model["key"],
            label: item.model["label"],
          };
        }) ?? []
        return temp;
      }
    },
}

 

5.1.问:此处"?"和"??"的作用分别是什么,为什么要这样写?

 

答:

?.(可选链操作符)用于在访问属性或调用方法之前,先判断对象是否为null或undefined。

如果对象为null或undefined,就会短路返回undefined,而不会继续执行后续的属性访问或方法调用。

这样可以避免在空值上尝试访问属性或调用方法时出现错误,简化了代码的写法和错误处理。

 

 

??(空值合并操作符)用于在变量为空(null或undefined)时,提供一个默认值。

当左侧的值为null或undefined时,空值合并操作符会返回右侧的默认值。如果左侧的值不为空,则返回左侧的值。

 

 这样的写法避免了抛出异常。

 

5.2.问:...item的作用?

...item 的作用是使用对象展开运算符将 item 对象的属性和值依次展开到新的对象中。

这样可以创建一个新的对象,其中包含了原始对象的所有属性及其对应的值。

...item 是一种简洁的写法,能够快速复制对象的属性和属性值。

它在使用对象字面量创建新的对象时很常用,可以方便地克隆或创建新的对象,而不改变原始对象的引用。

 

标签:map,return,...,绑定,暑期,解构,item,model,options
From: https://www.cnblogs.com/FatTiger4399/p/17593061.html

相关文章

  • Mybatis中的Mapper.xml映射文件sql查询接收多个参数 分页查询 sql语句动态生成的时候,
    Mybatis中的Mapper.xml映射文件sql查询接收多个参数分页查询sql语句动态生成的时候,使用${},sql语句中某个参数进行占位的时候用#{}原文链接:https://blog.csdn.net/Ep_Little_prince/article/details/100687848​我们都知道,在Mybatis中的Mapper.xml映射文件可以定制动态SQ......
  • HashMap深入学习
    1.HashMap和HashTable的区别?a.HashMap是线程不安全的,HashTable是线程安全的。b.HashTable不允许有null键和null值。c.HashMap底层是数组+链表+红黑树,而HashTable底层是数组+链表。d.HashMap默认的初始大小为16,每次扩容变为原来的2倍;HashTable默认初始大小为11,每次扩容后容量变为原......
  • Mapper.xml详解 一对一 多对一 多对多
    Mapper.xml详解Mapper.xml详解一对一多对一多对多原文链接:https://blog.csdn.net/qq_36850813/article/details/80037363 我们知道,每一款框架产品在实际开发中,都是通过XML文件来培训框架的相关流程的,MyBatis也不例外,主要有两个配置文件:config.xml和Mapper.xml,当然,这两种配......
  • DASCTF 2023 & 0X401七月暑期挑战赛
    比赛只出了一道,小菜不是罪过-_-controlflow这个题动调到底就行foriinrange(40):after_xor[i]=inp[i]^0x401after_xor[i]+=i*i;foriinrange(11,30,1):x=i-10after_xor[i]^=x*(x+1)foriinrange(40):after_xor[i]-=iafter_xo......
  • 2023牛客暑期多校5 I The Yakumo Family
    题意RanfeelsboringathomeandwantstoproposeamathproblemwithYukariandChen!So,here'sTheYakumoFamilyProblem:Givenanintegerarraya,trytocalculatethevalueofthefollowingequationmodulo\(998244353\):\[\sum_{1\lel_1\le......
  • mongodb aggregate map reduce
    MongoDB的聚合(Aggregate)MapReduceMongoDB是一个非关系型数据库,提供了多种数据操作和查询方法。其中,聚合(Aggregate)操作是一种强大的功能,可以对数据集进行变换和处理。在聚合操作中,MapReduce是一种常用的方法,用于对数据进行分组、计算和汇总。MapReduce简介MapReduce是一种分......
  • mmap python
    mmap在python中的使用简介在Python中,我们可以使用mmap模块来实现内存映射。内存映射是一种将文件映射到内存的方法,使得我们可以像操作内存一样操作文件。这在处理大型文件时非常有用,可以提高文件的读写速度。整体流程下面是实现mmap的整体流程,我们将分为以下几个步骤:步骤......
  • 2023牛客暑期多校训练营4
    A.BoboStringConstruction题意:给出一个01字符串t,要求构造一个长为n的01字符串s,使得新的字符串t+s+t不会有超过两个子串tSolution答案要么全0串要么全1串带进去看看成不成立就行了voidsolve(){ intn;cin>>n; strings0(n,'0'); strings1(n,'1'); stringt;cin>>t; ......
  • vue2集成simple-mind-map思维导图,实现在线制作思维导图
    1.使用组件组件源码版本licensesimple-mind-map地址0.6.6MIT@toast-ui/editor地址3.1.5MITv-viewer地址1.6.4MITxlsx地址0.18.5Apache-2.0vue-i18n地址8.27.2MIT2.组件结构(部分)3.截图4.示例项目项目一:gitee......
  • 在Mapper.xml中写复杂的动态SQL语句
    在Mapper.xml中写复杂的动态SQL语句原文链接:https://blog.csdn.net/qq_42108331/article/details/131398433说明:在三层架构开发中,使用Mybatis框架操作数据库有两种方式,一种是在Mapper类里的方法上加注解(@Select、@Insert等),另一种是在Mapper.xml文件的标签内写SQL语句。第二......