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

这篇具有很好参考价值的文章主要介绍了大二暑期实习记录(一):处理组件绑定数据错误(数组解构,map()方法)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

好家伙,搬砖

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

文章来源地址https://www.toymoban.com/news/detail-618365.html

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;
      }
    },
}