vue實(shí)現(xiàn)表格數(shù)據(jù)的增刪改查

在管理員的一些后臺(tái)頁(yè)面里，個(gè)人中心里的數(shù)據(jù)列表里，都會(huì)有對(duì)這些數(shù)據(jù)進(jìn)行增刪改查的操作。比如在管理員后臺(tái)的用戶列表里，我們可以錄入新用戶的信息，也可以對(duì)既有的用戶信息進(jìn)行修改。在vue中，我們更應(yīng)該專(zhuān)注于對(duì)數(shù)據(jù)的操作和處理。

比如我們有一個(gè)這樣的頁(yè)面：

我們?cè)谶@個(gè)頁(yè)面里，就實(shí)現(xiàn)了增刪改查4個(gè)功能，點(diǎn)擊鏈接查看demo【http://www.xiabingbao.com/demo/vue-curd/index.html】。

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

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

設(shè)置這些數(shù)據(jù)主要也是復(fù)習(xí)一下vue對(duì)表單的處理操作，這里面的表單有：文本輸入框，單選按鈕，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)行過(guò)濾，數(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ù)組渲染出來(lái)：

<tr v-cloak v-for="(item, index) of slist">
 <td>{{index+1}}</td>
 <td>{{item.username}}</td>
 <td>{{item.email}}</td>
 <td>{{item.sex}}</td>
 <td>{{item.province}}</td>
 <td>{{item.hobby.join(' | ')}}</td>
 <td><a href="javascript:;" @click="showOverlay(index)">修改</a> | <a href="javascript:;" @click="del(index)">刪除</a></td>
</tr>

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

2. 增加和刪除功能

把增加功能和刪除合并到一起，是這兩個(gè)功能相對(duì)來(lái)說(shuō)都比較簡(jiǎn)單。
增加用戶時(shí)使用push方法，把用戶的信息添加到list數(shù)組的最后：

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

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

3. 修改功能

當(dāng)我們想要修改某個(gè)元素時(shí)，可以把這個(gè)位置上的數(shù)據(jù)取出來(lái)放到彈層里（或者其他某個(gè)位置），在彈層里的信息可以取消或者修改后進(jìn)行保存。
假設(shè)我們彈層里的數(shù)據(jù)是selectedlist，那么每次修改時(shí)，把index位置的數(shù)據(jù)給了selectedlist，然后在彈層中修改selectedlist。我們也能看到修改數(shù)據(jù)的類(lèi)型： 文本框（用戶名，郵箱），單選按鈕（性別），select選擇框（所在省份），多選框（愛(ài)好），這里我們主要練習(xí)的是表單處理（https://cn.vuejs.org/v2/guide/forms.html）。彈層是否顯示用變量isActive來(lái)控制：

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

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

this.selectedlist = this.list[index];

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

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)說(shuō)過(guò)，在頁(yè)面表格中展示的是slist中的數(shù)據(jù)，就是為了方便執(zhí)行查詢操作：

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

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

1.用戶在輸入某個(gè)字符后，自動(dòng)在輸入框下方用列表展示出用戶可能要查詢的詞語(yǔ)（如用戶名等）
2.同步更新表格中的數(shù)據(jù)

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

<input type="text" placeholder="search" @input="search" list="cars" class="search">
<datalist id="cars">
 <option v-for="item in searchlist" :value="item"></option>
</datalist>

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

// 搜索
search(e) {
 var v = e.target.value,
 self = this;
 self.searchlist = [];
 if (v) {
 var ss = [];

 // 過(guò)濾需要的數(shù)據(jù)
 this.list.forEach(function (item) {
  // 檢測(cè)用戶名
  if (item.username.indexOf(v) > -1) {
  if (self.searchlist.indexOf(item.username) == -1) {
   self.searchlist.push(item.username);
  }
  ss.push(item);
  } else if (item.email.indexOf(v) > -1) {
  // 檢測(cè)郵箱
  if (self.searchlist.indexOf(item.email) == -1) {
   self.searchlist.push(item.email);
  }
  ss.push(item);
  }
 });
 this.setSlist(ss); // 將過(guò)濾后的數(shù)據(jù)給了slist
 } else {
 // 沒(méi)有搜索內(nèi)容，則展示全部數(shù)據(jù)
 this.setSlist(this.list);
 }
}

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

5. 將彈層獨(dú)立為組件

其實(shí)我們應(yīng)該發(fā)現(xiàn)，修改功能（或新增功能）從代碼和樣式上相對(duì)來(lái)說(shuō)比較獨(dú)立，我們把彈層獨(dú)立為組件的形式，把需要修改的數(shù)據(jù)通過(guò)props傳遞給該組件（新增數(shù)據(jù)時(shí)，可以給組件傳遞一個(gè)空數(shù)據(jù)），當(dāng)用戶點(diǎn)擊保存時(shí)，再通過(guò)$emit給了父組件（子組件不能直接父級(jí)的數(shù)據(jù)，需要用data或者computed生成一個(gè)局部變量，然后再使用$emit方法把這個(gè)局部數(shù)據(jù)再傳遞上去）：

// 彈層組件 
Vue.component('model', {
 props: ['list', 'isactive'],
 template: `<div class="overlay" v-show="isactive">
   <div class="con">
   <h3 class="title">新增 | 修改</h3>
   <div class="content">
    /* 省略 */
   </div>
   </div>
  </div>`,
 computed: {
 modifylist() {
  return this.list;
 }
 },
 methods: {
 changeActive() {
  this.$emit('change'); // 關(guān)閉彈層，修改isactive值
 },
 modify() {
  this.$emit('modify', this.modifylist); // 將修改后的數(shù)據(jù)傳遞給父組件
 }
 }
});

父組件，在父組件中截取change和modify事件，再用changeOverlay和modify來(lái)實(shí)現(xiàn)：

<model :list='selectedlist' :isactive="isActive" v-cloak @change="changeOverlay" @modify="modify"></model>

6. 總結(jié)

洋洋灑灑寫(xiě)了不少，其實(shí)里面的難點(diǎn)不太多，主要是form表單方面的操作，再一個(gè)就是練習(xí)下組件間的數(shù)據(jù)與事件傳遞。內(nèi)容比較簡(jiǎn)單，歡迎各位批評(píng)指正。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。