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操纵Cookie实现购物车程序
Nov 23 Javascript
javascript写的日历类(基于pj)
Dec 28 Javascript
jQuery EasyUI API 中文文档 - ComboTree组合树
Oct 11 Javascript
jQuery动态效果显示人物结构关系图的方法
May 07 Javascript
JS中frameset框架弹出层实例代码
Apr 01 Javascript
Jquery实现$.fn.extend和$.extend函数
Apr 14 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
Jul 18 Javascript
JavaScript自定义文本框光标
Mar 05 Javascript
angularjs封装$http为factory的方法
May 18 Javascript
jQuery自动或手动图片切换效果
Oct 11 jQuery
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
解决layui页面按钮点击无反应,也不报错的问题
Sep 29 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
PHP生成带有雪花背景的验证码
2008/09/28 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
php常用的url处理函数总结
2014/11/19 PHP
php实现的Curl封装类Curl.class.php用法实例分析
2015/09/25 PHP
PHP curl模拟登录带验证码的网站
2015/11/30 PHP
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
js对象转json数组的简单实现案例
2014/02/28 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
以Python代码实例展示kNN算法的实际运用
2015/10/26 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
ajax分页效果(bootstrap模态框)
2017/01/23 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
2018/03/12 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
layui使用数据表格实现购物车功能
2019/07/26 Javascript
使用JS来动态操作css的几种方法
2019/12/18 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
VueQuillEditor富文本上传图片(非base64)
2020/06/03 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
介绍Python的Django框架中的QuerySets
2015/04/20 Python
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
Python输出带颜色的字符串实例
2017/10/10 Python
Python实现的用户登录系统功能示例
2018/02/05 Python
python基础教程项目三之万能的XML
2018/04/02 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
iframe跨域的几种常用方法
2019/11/11 HTML / CSS
澳大利亚宠物食品和药物在线:Jumbo Pets
2018/03/24 全球购物
Java编程面试题
2016/04/04 面试题
关于毕业的广播稿
2014/01/10 职场文书
副校长竞聘演讲稿
2014/09/01 职场文书
法制教育主题班会
2015/08/13 职场文书