vue的表單編輯刪除,儲存取消功能

2022-05-23 16:18:07 字數 2449 閱讀 4523

過年回來第一篇部落格,可能說的不是很清楚,而且心情可能也不是特別的high,雖然今天是元宵,我還在辦公室11.30在加班,但就是想把寫過的**記下來,怕以後可能真的忘了。(心將塞未塞,欲塞未滿)

vue的表單

:model="form" ref="form">

當然,表單還有下拉選擇框,radio表單等,在下面這個elementui官方元件

比較重要的是是標紅的那兩個屬性,然後下面的data返回的資料時,要在form裡把model裡的兩個值,寫進去。

data () 

}}

而不能把寫成空,form: {}

這樣的寫法,資料傳過來的時候,會接收不到資料,需要name和number佔位,你才能把資料傳過來。

然後是編輯,刪除功能

先是編輯,刪除按鈕的繫結

column

prop="option"label="操作"style="width:250px">

button

size="mini"type="info"@click="handleedit(scope.$index,scope.row)">編輯

button

size="mini"type="danger"@click="handledelete(scope.$index,scope.row)">刪除

編輯函式

handleedit (index, row) ,

handledelete (index, row) ,

然後data裡,要把editvisible: false 和delvisible: false 放進return裡去

至於index和row兩個引數,是下標和行資料

接下來,寫dialog編輯框

:visible.sync="edit"

@close="closingdiag"

width="80%">

取消儲存

刪除框

刪除不可恢復,是否確定刪除?

取消 確定

我這邊用的,是把編輯dialog放在另乙個元件,通過元件導進來。

就需要在新的edit.vue的data裡,edit:false

關閉模態框

closingdiag: function

() ,

取消功能

resetform: function

(formname) ,

儲存功能

噢對了,還有個最重要的一點,要寫props(內建屬性),watch(監聽才能彈窗)

props:

watch:

然後顯示編輯彈窗

showedit: function

() }).then(res =>, (res) =>)

}

突然感覺寫的有點亂亂的,但這些是真的都要寫的,有不懂的可以在下面提問,或者去其他部落格搜搜,感覺我應該寫兩個部落格分開寫,不然根本講不清楚。。。。算了,我繼續說,那既然你寫的是元件,那肯定原來的主頁面也要引用,如下**

匯入元件

import edit from './edit.vue'export 

default

}

確定刪除的功能

deleterow () }).then((res) =>)

}, (error) =>)

this.delvisible = false

; }

還有我用到了批量刪除功能,但是這裡就不寫了,因為篇幅太長了,但是我看的鏈結可以分享給你們

還有mock.js寫假資料的鏈結,以後的部落格我會再寫,我自己找的鏈結知識

或者雙擊實現**內單元格編輯的功能

你也可以用js實現編輯框。

某大神的**:

然後,在標籤裡加上這個@dblclick="tabledbedit",功能是下面,注意的是功能那裡別寫引數,功能那裡再寫引數,不然會報錯

tabledbedit (row, column, cell, event)

加油,*些天我會慢慢越寫越多的

元宵快樂啊大家!哦不對,寫完這篇部落格已經2019-2-20-0:26了,那就祝大家晚安好夢,夜夢吉祥哈!

(實**兩個月,學的還是挺多的,加油加油加加油!)

vue利用for迴圈切換表單編輯和展示的功能

結果圖 迴圈出來的表單可以在edit和view間切換,如果需要單個表單儲存就在每個sure按鈕加事件 html id name body edit idname body sure js test111 false,json111 需要注意正常從後台拉取的json資料不應該包含foo欄位,這裡需要在...

表單提交多個選項用於刪除或編輯

經常在網頁中看到網頁顯示多個檔案,提供各種操作,包括刪除,凍結,移動,複製等,如果一次對每個檔案進行相同的操作,比如刪除,相當浪費時間,於是便出現了 一種叫 多選 的操作方式,在選定內容後進行操作,將大幅度提高效率。實現 如下 我自己建立的資料庫test包含userid,username,users...

關於C儲存,取得,釋放lua的引用

c include windows.h include extern c pragma comment lib,lua5.1.lib lua state l static int getref lua state l 取引用 return 1 static int setref lua state ...