vue實現資料的增刪改查

2022-09-11 02:03:12 字數 3593 閱讀 8963

在管理員的一些後台頁面裡,個人中心裡的資料列表裡,都會有對這些資料進行增刪改查的操作。比如在管理員後台的使用者列表裡,我們可以錄入新使用者的資訊,也可以對既有的使用者資訊進行修改。在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()

}});

父元件,在父元件中擷取changemodify事件,再用changeoverlaymodify來實現:

model>

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

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

資料增刪改查

import sqlite3 from db import get db conn,close db conn 測試 db file score.db 插入資料 definset score data 1 獲取連線 conn sqlite3.connect db file 2 開啟游標cursor ...

資料的增刪改查

語法 insert into beauty 欄位1,欄位2,values 值1,值2,特點 1 欄位和值列表必須一一對應 2 字元型和日期型必須用單引號引起來 3 欄位的順序可以和表中字段的順序不一致 4 不可以為null的字段,必須插入值,比如說主鍵id 可以為null的字段,可以不用插入值,使用...