element中form組件prop嵌套屬性問題怎么解決

本篇內容介紹了“element中form組件prop嵌套屬性問題怎么解決”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

Introduction

分享今天同事問的一個問題, 下面這段代碼會報錯，先看代碼：重點是el-form-item組件的prop屬性

<template>
  <div id="app">
    <el-form label-width="100px" :model="ruleForm" :rules="rules">

      <el-form-item
        v-for="(item, index) in tableData"
        :key="item.id"
        :prop="'tableData.' + index + '.name'"
        :rules="rules.name"
      >
        <el-input v-model="item.name"></el-input>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      ruleForm: {
        name: ''
      },
      tableData: [
        { id: 1, name: "" },
        { id: 2, name: "" },
      ],
      rules: {
        name: [
          {
            required: true,
            message: "請輸入活動名稱",
            trigger: "blur",
            validator(rule, value, callback) {
              console.log("rule: ", rule);
              console.log("value: ", value);
            },
          },
        ],
      },
    };
  },
};
</script>

我第一眼看上去的時候并沒有發現什么問題，但這段代碼實實在在的報錯了，我們來看一下錯誤

首先需要明確的是 這是一個警告, 并非一個error, 但他直接導致了我們的代碼執行結果非預期，我們來分析一下這個錯誤

1.首先這個錯誤的第一句**Error in mounted hook**, 錯誤發生在mounted鉤子中

2.請安排一個有效的path給prop

首先第一個問題，我的代碼中并沒有mounted函數，他怎么會報錯呢？
第二個問題，讓我們提供一個有效的prop, 但這里我們明明給的是有效的撒。
最后查了官網并查了百度 都沒有找到很好的解決方式，最后沒有辦法，只能去看一下element-ui的源碼, 下面是源碼環節:

1.找到packages/form/src/form-item.vue這個文件

2. 我們根據他的報錯來分析, 首先他說`mounted hook`中報錯, 那我們就直接來看這個hook做了什么事情: 

mounted() {
  if (this.prop) {
    this.dispatch('ElForm', 'el.form.addField', [this]); // 這一步不用管

    let initialValue = this.fieldValue; // 取得fieldvalue
    // 判斷fieldvalue是不是數組, 如果是數組則合并
    if (Array.isArray(initialValue)) {
      initialValue = [].concat(initialValue);
    }
    // 給this定義一個initialValue屬性
    Object.defineProperty(this, 'initialValue', {
      value: initialValue
    });

    this.addValidateEvents();
  }
}

我看這段代碼的第一反應是, 這也沒干什么事兒啊, 就取了個值 賦了個值, 看了一會兒我發現, 有一個盲點就是this.fieldValue這里, 這是一個什么東西呢？不知道 去看一下。

  computed: {
      fieldValue() {
        // 1.拿到當前"form"的model屬性(這里很重要, 要記住這一步)
        const model = this.form.model;
        if (!model || !this.prop) { return; }

        // 2.拿到當前"form-item"的prop屬性, 
        // 也就是我們傳的那個:prop="'tableData.' + index + '.name'"
        let path = this.prop;
        if (path.indexOf(':') !== -1) {
          path = path.replace(/:/, '.');
        }
        // 3.將model和path傳給了getPropByPath方法
        return getPropByPath(model, path, true).v;
      }  
  }

代碼翻到fieldValue這里, 發現這是一個computed屬性(步驟見注釋), 發現最終返回getPropByPath方法的返回結果, 我們接著去看一下這個方法.
我們發現這個方法是在utils/util下的一個方法

第一眼看到這個方法, 是不是有一種眼熟的感覺？越看越像js的一個面試題

function getValue(obj, path) {
 ...
}

const obj = { a: { b: { c: '1' } } }

getValue(obj, 'a.b.c'); // 1

有木有啊！ 有木有！不能說一模一樣，只能說分毫不差，既然知道它是面試題就簡單了，我們首先需要明確 這個方法的作用就是 通過嵌套字符串key 拿到key對應的value, 那我們來看一下element是怎么做的。

首先先看第一句代碼let tempObj = obj, 這里第一次的obj是誰呢？是不是上面傳過來的this.form.model啊? 我們來看一下 我們代碼中傳輸的model是什么

我們這里只需要記住, 我們傳的是一個對象{ name: '' }好的 我們再來看下一步, path = 正則匹配, 最后的結果是keyArr = ['tableData', 0, 'name']下面的代碼就是走keyArr的循環了, 這里我們是3次循環, 因為keyArr只有三個元素

我們還是來捋一下：

1. 第一次循環, 此時的tempObj是 { name: '' }, key是tableData, key in tempObj?, 很顯然是false, 所以直接走了else, 觸發了throw new Error

其實看到這里我們就明白了, element在做prop判斷的時候, 是通過判斷key在不在model中的方式 來判斷path是否合法的, 那我們知道這個原理之后, 只需要將我們的代碼稍稍改動一下即可。

我們只需要將tableData移到ruleForm中即可, 然后我們再來看控制臺已經不報錯了。

“element中form組件prop嵌套屬性問題怎么解決”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！