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

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

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

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

我們的數(shù)據(jù)都放在數(shù)組list中，但是這里并不直接對list對循環(huán)輸出，而是先把list中的數(shù)據(jù)給一個數(shù)組slist，對slist進行循環(huán)輸出。因為我們在后面的查詢功能中需要對數(shù)據(jù)進行過濾，數(shù)組list一直保存著原始數(shù)據(jù)（包括新增、修改后或已刪除后），而數(shù)組slist只負責展示。

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

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

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

<tr v-cloak v-for="(item, index) of slist">
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td><a href="javascript:;" @click="showOverlay(index)">修改</a> | <a href="javascript:;" @click="del(index)">刪除</a></td>
</tr>

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

2. 增加和刪除功能

把增加功能和刪除合并到一起，是這兩個功能相對來說都比較簡單。

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

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

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

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

3. 修改功能

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

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

有沒有發(fā)現(xiàn)一個問題，當修改彈層中的信息時，表格中的數(shù)據(jù)也同步更新了。可是我們本身是希望當點擊保存按鈕時，才把彈層中的數(shù)據(jù)保存到表格里。問題的根源就出在這里：

this.selectedlist = this.list[index];

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

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

當用戶修改數(shù)據(jù)后，selectedlist就會發(fā)生變化，點擊保存按鈕時，將數(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)說過，在頁面表格中展示的是slist中的數(shù)據(jù)，就是為了方便執(zhí)行查詢操作：

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

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

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

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

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

<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功能的實現(xiàn)，searchlist為在輸入框下方展示的可能要搜索的詞語，ss數(shù)組則保存過濾后的數(shù)據(jù)，當循環(huán)完畢后，設置調用setSlist方法修改slist數(shù)組：

每當用戶輸入或者刪除一個字符時都會調用search方法，執(zhí)行查詢操作，當用點擊展示詞語列表時，也會調用search方法。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com