vue實現資料的增刪改查

在管理員的一些後台頁面裡，個人中心裡的資料列表裡，都會有對這些資料進行增刪改查的操作。比如在管理員後台的使用者列表裡，我們可以錄入新使用者的資訊，也可以對既有的使用者資訊進行修改。在vue中，我們更應該專注於對資料的操作和處理。

比如我們有乙個這樣的頁面：

我們在這個頁面裡，就實現了增刪改查4個功能，點選鏈結檢視demo【

我們把這些使用者資訊儲存到list的陣列中，然後增刪改查就在這個陣列上進行：

list: [
,// ...
]

設定這些資料主要也是複習一下vue對表單的處理操作，這裡面的表單有：文字輸入框，單選按鈕，select選擇框，核取方塊等。

我們的資料都放在陣列list中，但是這裡並不直接對list對迴圈輸出，而是先把list中的資料給乙個陣列slist，對slist進行迴圈輸出。因為我們在後面的查詢功能中需要對資料進行過濾，陣列list一直儲存著原始資料（包括新增、修改後或已刪除後），而陣列slist只負責展示。

在vue中提供乙個setslist方法，將需要展示的資料給了陣列slist：

// 獲取需要渲染到頁面中的資料
setslist(arr)

然後在html中使用v-for把slist陣列渲染出來：

}td>
}td>
}td>
}td>
}td>
}td>
修改a> | 刪除a>td>
tr>
在操作這一欄中，給修改和刪除操作繫結上事件。
把增加功能和刪除合併到一起，是這兩個功能相對來說都比較簡單。
增加使用者時使用push
方法，把使用者的資訊新增到list陣列的最後：
this.list.push();

這樣就能新增一位ffff的使用者了。

刪除使用者時，通過splice(index, 1)，可以刪除index位置的資料，頁面上的資料自動就會更新。

當我們想要修改某個元素時，可以把這個位置上的資料取出來放到彈層裡（或者其他某個位置），在彈層裡的資訊可以取消或者修改後進行儲存。

假設我們彈層裡的資料是selectedlist，那麼每次修改時，把index位置的資料給了selectedlist，然後在彈層中修改selectedlist。我們也能看到修改資料的型別：文字框（使用者名稱，郵箱），單選按鈕（性別），select選擇框（所在省份），多選框（愛好），這裡我們主要練習的是表單處理（彈層是否顯示用變數isactive來控制：

// 修改資料
modifydata(index)

有沒有發現乙個問題，當修改彈層中的資訊時，**中的資料也同步更新了。可是我們本身是希望當點選儲存按鈕時，才把彈層中的資料儲存到**裡。問題的根源就出在這裡：

this.selectedlist = this.list[index];

因為list[index]是個object型別的資料，若使用=賦值，則賦值操作為淺度拷貝（把資料的位址賦值給對應變數，而沒有把具體的資料複製給變數，變數會隨資料值的變化而變化），selectedlist與list[index]使用相同的資料位址，互相引起資料值的變化。因此這裡我們需要進行深度拷貝：

this.selectedlist = json.parse( json.stringify(this.list[index]) ); // 先轉換為字串，然後再轉換

當使用者修改資料後，selectedlist就會發生變化，點選儲存按鈕時，將資料重新儲存到index位置：

/* this.list 資料陣列 this.selected 剛才修改的位置 this.selectedlist 需要儲存的資料 */vue.set(this.list, this.selected, this.selectedlist);

在第1小節中我們已經說過，在頁面**中展示的是slist中的資料，就是為了方便執行查詢操作：

// 獲取需要渲染到頁面中的資料
setslist(arr)

每次根據某些條件將過濾後的資料賦值給slist陣列，展示出查詢後的資料。這裡我們的查詢實現了兩個小功能：

使用者在輸入某個字元後，自動在輸入框下方用列表展示出使用者可能要查詢的詞語（如使用者名稱等）

同步更新**中的資料

這裡我們通過使用者名稱和郵箱進行查詢，因此在過濾資料時，需要檢測使用者名稱和郵箱是否含有查詢的單詞。我們先給輸入框繫結乙個input事件，同時用datalist展示使用者可能要查詢的詞語：

option>
datalist>

search功能的實現，searchlist為在輸入框下方展示的可能要搜尋的詞語，ss陣列則儲存過濾後的資料，當迴圈完畢後，設定呼叫setslist方法修改slist陣列：

// 搜尋
search(e) 
ss.push(item);
} else if (item.email.indexof(v) > -1) 
ss.push(item);
}});
this.setslist(ss); // 將過濾後的資料給了slist
} else 
}

每當使用者輸入或者刪除乙個字元時都會呼叫search方法，執行查詢操作，當用點選展示詞語列表時，也會呼叫search方法。

其實我們應該發現，修改功能（或新增功能）從**和樣式上相對來說比較獨立，我們把彈層獨立為元件的形式，把需要修改的資料通過props傳遞給該元件（新增資料時，可以給元件傳遞乙個空資料），當使用者點選儲存時，再通過$emit給了父元件（子元件不能直接父級的資料，需要用data或者computed生成乙個區域性變數，然後再使用$emit方法把這個區域性資料再傳遞上去）：

// 彈層元件 
vue.component('model', 
},methods: ,
modify() 
}});

父元件，在父元件中擷取change和modify事件，再用changeoverlay和modify來實現：

model>

vue實現資料的增刪改查

vue實現對資料的增刪改查 CURD

資料增刪改查

資料的增刪改查

vue實現資料的增刪改查

vue實現對資料的增刪改查 CURD

資料增刪改查

資料的增刪改查

相關推薦