vue实现搜索过滤效果

本文实例为大家分享了vue实现搜索过滤效果的具体代码，供大家参考，具体内容如下html：&l

本文实例为大家分享了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:;" rel="external nofollow" rel="external nofollow" @click="showOverlay(index)">修改</a> | <a href="javascript:;" rel="external nofollow" rel="external nofollow" @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.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: {
 }
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。