Vue中元件的遞迴

先來說下需求，就是乙個表單，會有樹形結構一樣，會有子表單，表單顯示什麼內容是後台通過介面資料來確定的；這個時候就和樹形結構一樣，肯定會有子元件的遞迴；這次是自己第一次寫遞迴，遇到了三個問題記錄下；

1、第乙個問題就是，迴圈表單；看下圖

然後這裡的資料返回的是這樣的：

說明下資料字段的含義：name屬性算是表頭，然後裡面的valuetype代表的是各種不同輸入框；比方說上面的7代表的是普通的下拉框，然後6就是普通的輸入框，1的話是布林下拉框（其實在前端這邊1和7是一樣的，但是需要注意點的是element中的下拉框判斷使用的是雙等於號，意思說，布林true等於字元轉的false及true=='false'是正確的，所以這裡需要格式化）；如果等於的是8的話，代表這個是另乙個子表單。如果有對應的editdata欄位，並且這裡還需要遞迴一次這樣的資料；

來看下我的格式化資料的過程：

1
formatterdata(editdataajax, id) 8//
如果是列舉的型別或者布林的型別，則需要給他格式化資料一下，用來建立option
9if (item.valuetype == 7 || item.valuetype == 1) );
20               } else
);25}26
}27}28
}29});30 }

最後這裡需要注意的一點就是，迴圈建立輸入框和下拉框的話，需要使用v-model的格式，如果單純的時候的是:value模式繫結的話，會有問題，需要格外的注意，請看下面的**

1
<
template 
v-if
="item.valuetype==6"
>
2<
div 
class
="inputdom"
>
3<
el-input 
v-model
="item['value']"
:disabled
="item.flag==1?true:false"
>
el-input
>
4div
>
5template
>

2、遞迴元件的使用首先要說下遞迴元件怎麼使用，就是我的元件檔名叫做fromitem.vue;然後我的name名稱也是fromitem（一定要有name），元件遞迴使用其實和使用其他的元件是一樣的；需要先引入

1 import fromitem from './fromitem';

然後註冊

components: ,

使用的時候，也是一樣的

123

但是這個時候，我們的資料就要發生相對應的變化：

當我們給父級的editdata賦值的時候，就會出來第一層級，讓我們給父級中任意乙個editdata賦值，就會出現子元件遞迴了。這個時候不管有幾層，都會出現相對應的表單了；

3、關於資料的整理和構建

開始的時候，我把每次請求的資料函式都放在了子元件中進行，就是fromitem.vue檔案中進行，但是這樣的話，每次請求到最新的資料，如果我不儲存上次的資料的話，發現就沒有父表單了，只能出現子表單；如果要是儲存的話，我就需要每次請求完成之後，呼叫父元件的方法，儲存很多資料。造成了理解的困難；

所以現在使用的方式就是，子元件檔案，也就是fromitem.vue元件，不做任何資料的處理，只是接受並且展示資料；資料的請求，整理，和最後的編輯儲存都在父元件中完成，這樣的話，就不會造成資料的混亂，畢竟遞迴的時候，做的越多越容易出錯；

Vue中元件的遞迴

vue中遞迴元件的使用

Vue遞迴元件

vue遞迴元件實現

Vue中元件的遞迴

vue中遞迴元件的使用

Vue遞迴元件

vue遞迴元件實現

相關推薦