vue实现搜索过滤效果


Posted in Javascript onMay 28, 2019

本文实例为大家分享了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: {
  }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
动态加载外部javascript文件的函数代码分享
Jul 28 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
Apr 01 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 Javascript
JavaScript程序设计之JS调试
Dec 09 Javascript
微信公众号 客服接口的开发实例详解
Sep 28 Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 Javascript
微信小程序文章详情页面实现代码
Sep 10 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
Aug 06 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
微信小程序 image组件遇到的问题
May 28 #Javascript
vue实现搜索功能
May 28 #Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 #Javascript
如何实现双向绑定mvvm的原理实现
May 28 #Javascript
vue实现带复选框的树形菜单
May 27 #Javascript
vue实现按需加载组件及异步组件功能
May 27 #Javascript
Vue实现导航栏点击当前标签变色功能
Aug 19 #Javascript
You might like
Session的工作方式
2006/10/09 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
PHP实现websocket通信的方法示例
2018/08/28 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
2014/01/10 Javascript
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
Js实现手机发送验证码时按钮延迟操作
2014/06/20 Javascript
jQuery根据元素值删除数组元素的方法
2015/06/24 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
jQuery 调用WebService 实例讲解
2016/06/28 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
vue-cli + sass 的正确打开方式图文详解
2017/10/27 Javascript
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
大学生实习思想汇报
2014/01/12 职场文书
管理专员自荐信
2014/01/26 职场文书
科技节口号
2014/06/19 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
2015年生活老师工作总结
2015/05/27 职场文书
小学运动会通讯稿
2015/07/18 职场文书
2016寒假假期总结
2015/10/10 职场文书
Html5获取用户当前位置的几种方式
2022/01/18 HTML / CSS
Python实现仓库管理系统
2022/05/30 Python