vue如何實作表格增删改查效果
釋出時間：2021-04-23 14:34:54
來源：億速雲
閱讀：90
作者：小新
小編給大家分享一下vue如何實作表格增删改查效果，相信大部分人都還不怎麼了解，是以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章後大有收獲，下面讓我們一起去了解一下吧！
為什麼要使用Vue
Vue是一款友好的、多用途且高性能的JavaScript架構，使用vue可以建立可維護性和可測試性更強的代碼庫，Vue允許可以将一個網頁分割成可複用的元件，每個元件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，是以越來越多的前端開發者使用vue。
實作效果
我們把這些使用者資訊儲存到list的數組中，然後增删改查就在這個數組上進行：list: [
{
username: 'aaaaa',
email: '[email protected]',
sex: '男',
province: '北京市',
hobby: ['籃球', '讀書', '程式設計']
},
{
username: 'bbbbb',
email: '[email protected]',
sex: '女',
province: '河北省',
hobby: ['彈琴', '讀書', '插畫']
}
// ...
]
這裡面的表單有：文本輸入框，單選按鈕，select選擇框，複選框等。
1. 展示資料
我們的資料都放在數組list中，但是這裡并不直接對list對循環輸出，而是先把list中的資料給一個數組slist，對slist進行循環輸出。因為我們在後面的查詢功能中需要對資料進行過濾，數組list一直儲存着原始資料(包括新增、修改後或已删除後)，而數組slist隻負責展示。
在vue中提供一個setSlist方法，将需要展示的資料給了數組slist：// 擷取需要渲染到頁面中的資料
setSlist(arr) {
this.slist = JSON.parse(JSON.stringify(arr));
}
然後在html中使用v-for把slist數組渲染出來：
修改 | 删除
在操作這一欄中，給修改和删除操作綁定上事件。
2. 增加和删除功能
把增加功能和删除合并到一起，是這兩個功能相對來說都比較簡單。
增加使用者時使用push方法，把使用者的資訊添加到list數組的最後：this.list.push({
username: 'ffff',
email: '[email protected]',
sex: '女',
province: '河南省',
hobby: ['彈琴', '插畫']
});
這樣就能添加一位ffff的使用者了。
删除使用者時，通過splice(index, 1)，可以删除index位置的資料，頁面上的資料自動就會更新。
3. 修改功能
假設我們彈層裡的資料是selectedlist，那麼每次修改時，把index位置的資料給了selectedlist，然後在彈層中修改selectedlist。我們也能看到修改資料的類型： 文本框(使用者名，郵箱)，單選按鈕(性别)，select選擇框(所在省份)，多選框(愛好)，這裡我們主要練習的是表單處理(https://cn.vuejs.org/v2/guide/forms.html)。彈層是否顯示用變量isActive來控制：// 修改資料
modifyData(index) {
this.selected = index; // 修改的位置
this.selectedlist = this.list[index];
this.isActive = true;
}
有沒有發現一個問題，當修改彈層中的資訊時，表格中的資料也同步更新了。可是我們本身是希望當點選儲存按鈕時，才把彈層中的資料儲存到表格裡。問題的根源就出在這裡：this.selectedlist = this.list[index];
因為list[index]是個Object類型的資料，若使用=指派，則指派操作為淺度拷貝(把資料的位址指派給對應變量，而沒有把具體的資料複制給變量，變量會随資料值的變化而變化)，selectedlist與list[index]使用相同的資料位址，互相引起資料值的變化。是以這裡我們需要進行深度拷貝：
複制代碼 代碼如下:
this.selectedlist = JSON.parse( JSON.stringify(this.list[index]) ); // 先轉換為字元串，然後再轉換
當使用者修改資料後，selectedlist就會發生變化，點選儲存按鈕時，将資料重新儲存到index位置：
Vue.set(this.list, this.selected, this.selectedlist);
4. 查詢功能
在第1小節中我們已經說過，在頁面表格中展示的是slist中的資料，就是為了友善執行查詢操作：// 擷取需要渲染到頁面中的資料
setSlist(arr) {
this.slist = JSON.parse(JSON.stringify(arr));
}
每次根據某些條件将過濾後的資料指派給slist數組，展示出查詢後的資料。這裡我們的查詢實作了兩個小功能：
1.使用者在輸入某個字元後，自動在輸入框下方用清單展示出使用者可能要查詢的詞語(如使用者名等)
2.同步更新表格中的資料
這裡我們通過使用者名和郵箱進行查詢，是以在過濾資料時，需要檢測使用者名和郵箱是否含有查詢的單詞。我們先給輸入框綁定一個input事件，同時用datalist展示使用者可能要查詢的詞語：
search功能的實作，searchlist為在輸入框下方展示的可能要搜尋的詞語，ss數組則儲存過濾後的資料，當循環完畢後，設定調用setSlist方法修改slist數組：
每當使用者輸入或者删除一個字元時都會調用search方法，執行查詢操作，當用點選展示詞語清單時，也會調用search方法。
以上是“vue如何實作表格增删改查效果”這篇文章的所有内容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的内容對大家有所幫助，如果還想學習更多知識，歡迎關注億速雲行業資訊頻道！