关于vue增删该查的分解

------------恢复内容开始------------

1 展示数据setSlist

setSlist(arr) {
    this.slist = JSON.parse(JSON.stringify(arr));
}
然后在html中使用v-for把slist数组渲染出来；

<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 增加和删除功能
增加用户用到一个push方法把用户的信息添加到list数组最后
比如:

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

删除用户时，通过splice(index, 1)，可以删除index位置的数据，页面上的数据自动就会更新。

3 修改功能

// 修改数据
modifyData(index) {
    this.selected = index; // 修改的位置
    this.selectedlist = this.list[index];
    this.isActive = true;
}

this.selectedlist = JSON.parse( JSON.stringify(this.list[index]) ); // 先转换为字符串，然后再转换

 4 查询功能

// 获取需要渲染到页面中的数据
setSlist(arr) {
    this.slist = JSON.parse(JSON.stringify(arr));
}

每次根据某些条件将过滤后的数据赋值给slist数组，展示出查询后的数据。这里我们的查询实现了两个小功能：

1. 用户在输入某个字符后，自动在输入框下方用列表展示出用户可能要查询的词语（如用户名等）

2. 同步更新表格中的数据

这里我们通过用户名和邮箱进行查询，因此在过滤数据时，需要检测用户名和邮箱是否含有查询的单词。我们先给输入框绑定一个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(e) {
    var v = e.target.value,
        self = this;
    self.searchlist = [];
    if (v) {
        var ss = [];

        // 过滤需要的数据
        this.list.forEach(function (item) {
            // 检测用户名
            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) {
                // 检测邮箱
                if (self.searchlist.indexOf(item.email) == -1) {
                    self.searchlist.push(item.email);
                }
                ss.push(item);
            }
        });
        this.setSlist(ss); // 将过滤后的数据给了slist
    } else {
        // 没有搜索内容，则展示全部数据
        this.setSlist(this.list);
    }
}