vue实现搜索过滤效果

2023-08-22 23:37:04 293

[v-cloak]{ display:none } table{ border:1pxsolid#ccc; padding:0; border-collapse:collapse; table-layout:fixed; /*margin-top:10px;*/ width:100%; margin-top:45px; } tabletd, tableth{ height:30px; border:1pxsolid#ccc; background:#fff; font-size:2vh; padding:12px3px6px8px; color:#666666; font-weight:300; } tableth:first-child{ width:4rem; } .container, .st{ /*width:1000px;*/ margin:10pxauto0; font-size:13px; font-family:'微软雅黑' } .container.search{ font-size:15px; padding:4px; } .container.add{ padding:5px15px; } .overlay{ position:fixed; top:0; left:0; width:100%; height:100%; z-index:6; background:rgba(0,0,0,0.7); } .overlaytd: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; }

Vue.component('model',{ template:'', props:['list','isactive'], computed:{ modifylist(){ returnthis.list; } }, methods:{ changeActive(){ this.$emit('change'); }, modify(){ this.$emit('modify',this.modifylist); }, add(){ } } }); varapp=newVue({ 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(){ varv=$('.search').val(), self=this; self.searchlist=[]; if(v){ varss=[]; //过滤需要的数据 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); }elseif(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:{ } })

vue实现搜索过滤效果

热门推荐

随机推荐