好家伙,搬磚

今天在做組件遷移(從一個舊平臺遷移到一個新平臺)的時候,發現了一些小小的問題:

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 是一種簡潔的寫法，能夠快速複製對象的屬性和屬性值。

它在使用對象字面量創建新的對象時很常用，可以方便地克隆或創建新的對象，而不改變原始對象的引用。