vue搜索过滤效果

html：

<table id="tfhover_1" class="tftable_1" border="1">
    <tr>
        <th>名称</th>
        <th>链接状态</th>
        <th>IP</th>
        <th>特例类型</th>
        <th>所属城市</th>
        <th>所属机房</th>
    </tr>
    <tr v-cloak v-for="(item, index) of slist">
        <td>{{item.name}}</td>
        <td>{{item.username}}</td>
        <td>{{item.email}}</td>
        <td>{{item.sex}}</td>
        <td>{{item.province}}</td>
        <td>{{item.hobb}}</td>
        <!--<td><a href="javascript:;" @click="showOverlay(index)">修改</a> | <a href="javascript:;" @click="del(index)">删除</a></td>-->
    </tr>
</table>

css:

[v-cloak] {
    display: none
}
table {
    border: 1px solid #ccc;
    padding: 0;
    border-collapse: collapse;
    table-layout: fixed;
    /*margin-top: 10px;*/
    width: 100%;
    margin-top: 45px;
}
table td,
table th {
    height: 30px;
    border: 1px solid #ccc;
    background: #fff;
    font-size: 2vh;
    padding: 12px 3px 6px 8px;
    color: #666666;
    font-weight: 300;
}
table th:first-child {
    width: 4rem;
}
.container,
.st {
    /*width: 1000px;*/
    margin: 10px auto 0;
    font-size: 13px;
    font-family: '微软雅黑'
}
.container .search {
    font-size: 15px;
    padding: 4px;
}
.container .add {
    padding: 5px 15px;
}
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 6;
    background: rgba(0, 0, 0, 0.7);
}
.overlay td:first-child {
    width: 8rem;
}
.overlay .con {
    position: absolute;
    /*width: 420px;*/
    min-height: 300px;
    background: #fff;
    left: 50%;
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    /*margin-top: -150px;*/
    padding: 20px;
}

.span_1{
    font-size: 18px;
    color: #666666;
}

 

js:

Vue.http.options.emulateJSON = true;   可以进行post 请求

Vue.component('model', {

    template: '',
    props: ['list', 'isactive'],
    computed: {
        modifylist() {
            return this.list;
        }
    },
    methods: {
        changeActive() {
            this.$emit('change');
        },
        modify() {
            this.$emit('modify', this.modifylist);
        },
        add(){

        }
    }
});


var app = new Vue({
    el: '#app',
    data: {
        isActive: false,
        selected: -1,
        selectedlist: {},
        slist: [],
        searchlist: [],
        list: [
            {
                name:'Fe1',
                username: '开',
                email: '221.122.62.221',
                sex: '特例1',
                province: '北京',
                hobb:'电子机房'
            },
            {
                name:'Fe2',
                username: '关',
                email: '192.168.12.222',
                sex: '特例2',
                province: '上海',
                hobb: '服务机房'
            },
            {
                name:'Fe3',
                username: '开',
                email: '127.255.255.255',
                sex: '特例3',
                province: '重庆',
                hobb: '遥控机房'
            },
            {
                name:'Fe4',
                username: '关',
                email: '223.255.255.255',
                sex: '特例4',
                province: '北京市',
                hobb:'内网机房'
            }
        ]
    },
    created() {
        this.setSlist(this.list);
    },
    methods: {
        // 修改数据
        showOverlay(index) {
            this.selected = index;
            this.selectedlist = this.list[index];
            this.changeOverlay();
        },
        // 点击保存按钮
        modify(arr) {
            if (this.selected > -1) {
                Vue.set(this.list, this.selected, arr);
                this.selected = -1;
            } else {
                this.list.push(arr);
            }
            this.setSlist(this.list);

            this.changeOverlay();
        },

        del(index) {
            this.list.splice(index, 1);
            this.setSlist(this.list);
        },
        changeOverlay() {
            this.isActive = !this.isActive;
        },
        // 获取需要渲染到页面中的数据
        setSlist(arr) {
            this.slist = JSON.parse(JSON.stringify(arr));
        },
        // 搜索
        search() {
            var v = $('.search').val(),
                self = this;
            self.searchlist = [];
            if (v) {
                var ss = [];
                // 过滤需要的数据
                this.list.forEach(function (item) {
                    if (item.province.indexOf(v) > -1) {
                        if (self.searchlist.indexOf(item.province) == -1) {
                            self.searchlist.push(item.province);
                        }
                        ss.push(item);
                    } else if (item.hobb.indexOf(v) > -1) {
                        if (self.searchlist.indexOf(item.hobb) == -1) {
                            self.searchlist.push(item.hobb);
                        }
                        ss.push(item);
                    }
                });
                this.setSlist(ss); // 将过滤后的数据给了slist
            } else {
                // 没有搜索内容，则展示全部数据
                this.setSlist(this.list);
            }
        }
    },
    watch: {
    }
})