vue-element-admin 增刪改查（五）
2022-05-18由 一個不正經的碼農老王 發表于 農業
性別屬於什麼資料型別
此篇幅比較長，涉及到的小知識點也比較多，一定要耐心看完，記住學東西沒有耐心可不行！！！
一、新增和修改
注：新增和編輯用到了同一個元件，也就是此篇文章你能學會如何封裝元件及引用元件；第二能學會async和await；第三父向子傳遞資料props和子向父傳遞資料$emit（）；
1。新增資料
（1）請求地址：/article/category利用post傳遞資料
（2）編寫api：注意add的url地址用的 反單引號，可以在url後面進行組合資料，這個知識點在編輯和刪除你會看到詳細的解釋。
（3）編寫方法
首先新建一個元件，裡面的程式碼同樣是從elementUI中複製過來的表單，下面會根據詳細步驟解析elementUI標籤中屬性的意思。
在category/index。vue中進行引用，注意元件要首字母大寫，不是必須的，但是最好規範一些。
引用完畢之後進行修改edit。vue元件：解析：：title動態繫結的title名稱；：visible。sync布林型別，控制模態框的顯示與否；：before-close是一個方法，關閉模態框；：rules表單驗證；ref=相當於id=；：model表單的資料；prop=關閉模態框時清除資料要用到，這個在elementUI中有解釋，自己去看文件；v-model繫結的具體數值；：label繫結的資料，要做預設選中效果；@click執行的方法
由於是父元件向子元件傳遞資料，所以在子元件中要用props進行接收，然後在上面進行動態繫結；注意：所有接受的變數要定義type和default，宣告型別和預設值；此處小知識點，子元件向父元件傳遞值用$emit（）；
表單驗證：在子元件中返回rules，也就是開頭：rules=“rules”；注意：這裡的rules是個object，裡面需要驗證的欄位是個array，陣列中每個value都是object，詳細的驗證方法在elementUI中有體現，自己去看。
此處定義的handleClose、onSubmit、submit方法；注意：在submit中有編輯和新增方法，用的同一個，所以有if判斷；this。$refs［‘form’］。resetFields（）相當於jquey中$（‘#form’）。resetFields（）清空資料；async、await和promise區別，自己去百度，這裡只說明async和await是es6新語法，相當於api。add（this。formData）。then（（res） => {//TODO}）；這裡可能有同學會有疑問，this。closeForm（）這個方法在哪？他是父元件傳遞過來的Funciton，在下文中會解釋到。
開始操作父元件index。vue，在data中返回edit物件，然後把裡面的值繫結到
到這裡，新增功能就已經實現了，仔細去看我上面的截圖，一定要注意我說的點，如果你比著寫發現不對，一定要仔細對比。當對比不出來的時候，留言告訴我。
2。修改資料
（1）請求地址：/article/category/{id} 查詢資料用get，這裡的請求型別用的是restful請求方式，restful包含：get、post、put、patch、delete；/article/category 修改資料用put
（2）編寫api：由於修改需要先查到資料，然後再進行傳遞和渲染，所以在api中有一個查詢資料方法，也就是getById（）
（3）編寫方法
在index。vue父元件中編輯方法為handleEdit（），同樣這裡用到了async和await，然後先請求到了當前id返回的值，然後傳遞到edit。vue子元件中。
這裡的if判斷，判斷傳遞過來的formData的id值是否為空，有值說明是編輯，無值說明是新增。if判斷就在這裡進行的體現價值，因為我們新增和編輯用的同一個元件，所以if顯得至關重要。
仔細去看程式碼，去理解我的思路，為什麼某些地方是這樣寫而不是那樣寫，一定要注意。哪裡有看不明白的一定要留言進行討論，我看到會第一時間回覆。最終的效果：
二、刪除
（1）請求地址：/article/category/{id} 刪除用的是delete請求型別
（2）編寫api：在強調一遍，url用的反單引號
（3）編寫方法：因為刪除用不到子元件了，所以刪除都在index。vue中進行的
這裡用到了elementUI中的$confirm方法，去文件中複製使用即可，方法的話就不再詳細解釋了，前面幾篇文章已經解釋過了。api。delete（id）。then（（res） => {//TODO}）
最終效果：點選刪除，顯示提示，傳遞id進行刪除。
