1. 程式人生 > >element-ui 解析新增和編輯。裡面點選按鈕上的click事件為什麼要那樣寫?

element-ui 解析新增和編輯。裡面點選按鈕上的click事件為什麼要那樣寫?

 

1.首先新增頁面我們把定義的新增要填的表單繫結的model值全部又寫了一遍,和上面data裡面定義的格式是一樣的,為什麼呢?是多此一舉嗎?

當然不是。因為每次點選彈窗新增的表單都必須是置空的。而我們從新寫了一遍定義時的資料相當於把他置空了。

 

2.編輯的時候怎麼保證開啟的頁面直接顯示的就是當前行的資料呢?這樣靠this.editForm = Object.assign({}, row);這句程式碼。意思是:)//複製一個物件。就是把當前行的內容作為物件都複製出來給了this.editForm。當前定義的editForm的data一定要看著那個table定義的欄位的名字(就是上面那個affairtypes陣列)來哦。否則可能是不顯示了。

3.注意新增和編輯時定義的model繫結的欄位的名字。最好是和那個table裡面對應的欄位名字寫的一樣的。這樣就不用再轉換了

 

4.新增的表格提交了以後要清空資料。點選新增的時候清空一下。提交成功以後清空一下。不成功不要清空,因為你報錯了他可能就修改好了在提交的。

上面寫了點選新增時的清空,下面介紹提交後的清空。

this.$refs['editForm'].resetFields();  這個是清空ref="editForm"的表單的。

你會發現在點選新增時用這個清空不行。報錯因為點選新增的時候新增的頁面裡面的dom還沒有加載出來。你可以用this.$nextTick(()=>{this.$refs['editForm'].resetFields(); })也是和一個個元素的置空一樣的效果的。