vue实现前端列表多条件筛选


Posted in Javascript onOctober 26, 2020

本文实例为大家分享了vue实现前端列表多条件筛选的具体代码,供大家参考,具体内容如下

1、先上图:

vue实现前端列表多条件筛选

2、搜索条件绑定的数据是:

filterForm:{
 schoolName:'',//输入的学校名称
 position:'',//选择的区域区域
 schoolLevel:"",//选择的学校办别
},
schoolList:[
 {schoolName:'青岛市实验高级中学',schoolLevel:"",position:'山东省青岛市城阳区硕阳路69号'},
 {schoolName:'山东省青岛第二中学',schoolLevel:"",position:'山东省青岛市崂山区松岭路70号'},
 {schoolName:'山东省青岛第一中学',schoolLevel:"",position:'山东省青岛市市南区单县路46号'},
 {schoolName:'山东省青岛第三十九中学',schoolLevel:"",position:'市南区登州路5号'},
 {schoolName:'山东省青岛第六中学',schoolLevel:"",position:'山东省青岛市黄岛区云台山路66号'},
 {schoolName:'山东省青岛第十九中学',schoolLevel:"",position:'山东省青岛市即墨区鳌山卫街道卫场路69号'},
 {schoolName:'青岛艺术学校',schoolLevel:"",position:'青岛市李沧区九水路176号'},
 {schoolName:'山东省青岛第九中学',schoolLevel:"",position:'山东省青岛市黄岛区七星河路559号'},
 {schoolName:'青岛电子学校',schoolLevel:"",position:'山东省青岛市市北区台东一路118号'}
],//其中schoolList是元数据
resull:[]//搜索结果,也是列表循环的数据

3、监听:

watch: {
 // 监听对象变化
 filterForm:{
 handler(val, oldVal){
  if(val){
  // 如果筛选条件全为空,查全部;否则按条件筛选
  var objIsEmpty = this.filterForm.schoolName == '' && this.filterForm.schoolLevel == '' && this.filterForm.position == ''
  if(objIsEmpty){
   this.result = this.schoolList
  } else {
   // /拿到有值的参数
   let tempFilter = {};
   for(var key in this.filterForm) {
   if(typeof(this.filterForm[key]) != "undefined" && typeof(this.filterForm[key]) != "null" && this.filterForm[key] != null && this.filterForm[key] != "") {
    tempFilter[key] = this.filterForm[key];
   }
   }
   // console.log(tempFilter,'输出tempFilter')
   this.result = this.schoolList.filter(
   //筛选
   (item) => {
    let flag = false;
    for(key in tempFilter) {
    console.log(key,'输出key')
     if(item[key].toString().indexOf(tempFilter[key].toString()) >= 0) {
     flag = true;
     } else {
                    flag = false;
                    break;
                  }
                }
                if(flag) {
                  return item;
                }
              }
            );
            console.log(this.result,'输出筛选结果')
          }
        }
      },
      deep:true
    }
}

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

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

Javascript 相关文章推荐
用JavaScript和注册表脚本实现右键收藏Web页选中文本
Jan 28 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
Jul 22 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
js用Date对象处理时间实现思路及代码
Jan 31 Javascript
基于jquery实现控制经纬度显示地图与卫星
May 20 Javascript
谈谈AngularJs中的隐藏和显示
Dec 09 Javascript
jquery判断对象是否为空并遍历对象的简单实例
Jul 26 Javascript
Jquery获取当前城市的天气信息
Aug 05 Javascript
javaScript语法总结
Nov 25 Javascript
IE8兼容Jquery.validate.js的问题
Dec 01 Javascript
用js制作淘宝放大镜效果
Oct 28 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 Javascript
vue实现单一筛选、删除筛选条件
Oct 26 #Javascript
vue通过接口直接下载java生成好的Excel表格案例
Oct 26 #Javascript
基于elementUI竖向表格、和并列的案例
Oct 26 #Javascript
原生js实现贪吃蛇游戏
Oct 26 #Javascript
JavaScript实现五子棋小游戏
Oct 26 #Javascript
详解vue3.0 的 Composition API 的一种使用方法
Oct 26 #Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 #Javascript
You might like
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
php基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
php whois查询API制作方法
2011/06/23 PHP
在yii中新增一个用户验证的方法详解
2013/06/20 PHP
学习php设计模式 php实现命令模式(command)
2015/12/08 PHP
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
jscript之Open an Excel Spreadsheet
2007/06/13 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
Javascript中的作用域和上下文深入理解
2015/07/03 Javascript
详解基于Bootstrap扁平化的后台框架Ace
2015/11/27 Javascript
javascript绘制漂亮的心型线效果完整实例
2016/02/02 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
node的process以及child_process模块学习笔记
2018/03/06 Javascript
微信小程序(订阅消息)功能
2019/10/25 Javascript
Django与遗留的数据库整合的方法指南
2015/07/24 Python
python实现顺序表的简单代码
2018/09/28 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
python生成九宫格图片
2018/11/19 Python
10分钟教你用Python实现微信自动回复功能
2018/11/28 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
一些Solaris面试题
2015/12/22 面试题
Java基础知识面试题
2014/03/25 面试题
执法作风整顿剖析材料
2014/10/11 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
学生会工作感言
2015/08/07 职场文书
初中体育课教学反思
2016/02/16 职场文书
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL
Golang的继承模拟实例
2021/06/30 Golang
python编程简单几行代码实现视频转换Gif示例
2021/10/05 Python
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA
零基础学java之方法的定义与调用详解
2022/04/10 Java/Android