小編給大家分享一下vue如何實(shí)現(xiàn)表格增刪改查效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比?？h網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式浚縣網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋浚縣地區(qū)。費(fèi)用合理售后完善，十年實(shí)體公司更值得信賴。

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù)，Vue允許可以將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁(yè)中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。

實(shí)現(xiàn)效果

我們把這些用戶信息保存到list的數(shù)組中，然后增刪改查就在這個(gè)數(shù)組上進(jìn)行：

list: [
  {
    username: 'aaaaa',
    email: '123@qq.com',
    sex: '男',
    province: '北京市',
    hobby: ['籃球', '讀書', '編程']
  },
  {
    username: 'bbbbb',
    email: 'bbbbbbb@163.com',
    sex: '女',
    province: '河北省',
    hobby: ['彈琴', '讀書', '插畫']
  }
  // ...
]

這里面的表單有：文本輸入框，單選按鈕，select選擇框，復(fù)選框等。

1. 展示數(shù)據(jù)

我們的數(shù)據(jù)都放在數(shù)組list中，但是這里并不直接對(duì)list對(duì)循環(huán)輸出，而是先把list中的數(shù)據(jù)給一個(gè)數(shù)組slist，對(duì)slist進(jìn)行循環(huán)輸出。因?yàn)槲覀冊(cè)诤竺娴牟樵児δ苤行枰獙?duì)數(shù)據(jù)進(jìn)行過濾，數(shù)組list一直保存著原始數(shù)據(jù)（包括新增、修改后或已刪除后），而數(shù)組slist只負(fù)責(zé)展示。

在vue中提供一個(gè)setSlist方法，將需要展示的數(shù)據(jù)給了數(shù)組slist：

// 獲取需要渲染到頁(yè)面中的數(shù)據(jù)
setSlist(arr) {
  this.slist = JSON.parse(JSON.stringify(arr));
}

然后在html中使用v-for把slist數(shù)組渲染出來：

  
  
  
  
  
  
  修改 | 刪除

 在操作這一欄中，給修改和刪除操作綁定上事件。

2. 增加和刪除功能

把增加功能和刪除合并到一起，是這兩個(gè)功能相對(duì)來說都比較簡(jiǎn)單。

增加用戶時(shí)使用push方法，把用戶的信息添加到list數(shù)組的最后：

this.list.push({
  username: 'ffff',
  email: 'fffffff@163.com',
  sex: '女',
  province: '河南省',
  hobby: ['彈琴', '插畫']
});

這樣就能添加一位ffff的用戶了。

刪除用戶時(shí)，通過splice(index, 1)，可以刪除index位置的數(shù)據(jù)，頁(yè)面上的數(shù)據(jù)自動(dòng)就會(huì)更新。

3. 修改功能

假設(shè)我們彈層里的數(shù)據(jù)是selectedlist，那么每次修改時(shí)，把index位置的數(shù)據(jù)給了selectedlist，然后在彈層中修改selectedlist。我們也能看到修改數(shù)據(jù)的類型： 文本框（用戶名，郵箱），單選按鈕（性別），select選擇框（所在省份），多選框（愛好），這里我們主要練習(xí)的是表單處理（https://cn.vuejs.org/v2/guide/forms.html）。彈層是否顯示用變量isActive來控制：

// 修改數(shù)據(jù)
modifyData(index) {
  this.selected = index; // 修改的位置
  this.selectedlist = this.list[index];
  this.isActive = true;
}

有沒有發(fā)現(xiàn)一個(gè)問題，當(dāng)修改彈層中的信息時(shí)，表格中的數(shù)據(jù)也同步更新了?？墒俏覀儽旧硎窍Ｍ?dāng)點(diǎn)擊保存按鈕時(shí)，才把彈層中的數(shù)據(jù)保存到表格里。問題的根源就出在這里：

this.selectedlist = this.list[index];

因?yàn)閘ist[index]是個(gè)Object類型的數(shù)據(jù)，若使用=賦值，則賦值操作為淺度拷貝（把數(shù)據(jù)的地址賦值給對(duì)應(yīng)變量，而沒有把具體的數(shù)據(jù)復(fù)制給變量，變量會(huì)隨數(shù)據(jù)值的變化而變化），selectedlist與list[index]使用相同的數(shù)據(jù)地址，互相引起數(shù)據(jù)值的變化。因此這里我們需要進(jìn)行深度拷貝：

復(fù)制代碼 代碼如下:

this.selectedlist = JSON.parse( JSON.stringify(this.list[index]) ); // 先轉(zhuǎn)換為字符串，然后再轉(zhuǎn)換

當(dāng)用戶修改數(shù)據(jù)后，selectedlist就會(huì)發(fā)生變化，點(diǎn)擊保存按鈕時(shí)，將數(shù)據(jù)重新保存到index位置：

/*
 this.list 數(shù)據(jù)數(shù)組
 this.selected 剛才修改的位置
 this.selectedlist 需要保存的數(shù)據(jù)
*/
Vue.set(this.list, this.selected, this.selectedlist);

4. 查詢功能

在第1小節(jié)中我們已經(jīng)說過，在頁(yè)面表格中展示的是slist中的數(shù)據(jù)，就是為了方便執(zhí)行查詢操作：

// 獲取需要渲染到頁(yè)面中的數(shù)據(jù)
setSlist(arr) {
  this.slist = JSON.parse(JSON.stringify(arr));
}

每次根據(jù)某些條件將過濾后的數(shù)據(jù)賦值給slist數(shù)組，展示出查詢后的數(shù)據(jù)。這里我們的查詢實(shí)現(xiàn)了兩個(gè)小功能：

1.用戶在輸入某個(gè)字符后，自動(dòng)在輸入框下方用列表展示出用戶可能要查詢的詞語(yǔ)（如用戶名等）

2.同步更新表格中的數(shù)據(jù)

這里我們通過用戶名和郵箱進(jìn)行查詢，因此在過濾數(shù)據(jù)時(shí)，需要檢測(cè)用戶名和郵箱是否含有查詢的單詞。我們先給輸入框綁定一個(gè)input事件，同時(shí)用datalist展示用戶可能要查詢的詞語(yǔ)：

search功能的實(shí)現(xiàn)，searchlist為在輸入框下方展示的可能要搜索的詞語(yǔ)，ss數(shù)組則保存過濾后的數(shù)據(jù)，當(dāng)循環(huán)完畢后，設(shè)置調(diào)用setSlist方法修改slist數(shù)組：

每當(dāng)用戶輸入或者刪除一個(gè)字符時(shí)都會(huì)調(diào)用search方法，執(zhí)行查詢操作，當(dāng)用點(diǎn)擊展示詞語(yǔ)列表時(shí)，也會(huì)調(diào)用search方法。

以上是“vue如何實(shí)現(xiàn)表格增刪改查效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！