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 相关文章推荐
JQuery的read函数与js的onload不同方式实现
Mar 18 Javascript
中文字符串截取的js函数代码
Apr 17 Javascript
js判断浏览器类型为ie6时不执行
Jun 15 Javascript
jQuery中live()方法用法实例
Jan 19 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
javascript中new关键字详解
Dec 14 Javascript
浅谈$_FILES数组为空的原因
Feb 16 Javascript
webpack教程之webpack.config.js配置文件
Jul 05 Javascript
使用yeoman构建angular应用的方法
Aug 14 Javascript
极简主义法编写JavaScript类
Nov 02 Javascript
关于Vue的路由权限管理的示例代码
Mar 06 Javascript
记一次webapck4 配置文件无效的解决历程
Sep 19 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
PHP时间类完整实例(非常实用)
2015/12/25 PHP
PHP回调函数概念与用法实例分析
2017/11/03 PHP
php实现微信企业转账功能
2018/10/02 PHP
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
javascript是怎么继承的介绍
2012/01/05 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
AngularJS实现DOM元素的显示与隐藏功能
2016/11/22 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
Express + Session 实现登录验证功能
2017/09/08 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
Python下rrdtool模块的基本使用方法
2015/11/13 Python
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
人工智能最火编程语言 Python大战Java!
2017/11/13 Python
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
mac安装pytorch及系统的numpy更新方法
2018/07/26 Python
解决pycharm安装后代码区不能编辑的问题
2018/10/28 Python
如何使用django的MTV开发模式返回一个网页
2019/07/22 Python
Python Pickle 实现在同一个文件中序列化多个对象
2019/12/30 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
使paramiko库执行命令时在给定的时间强制退出功能的实现
2021/03/03 Python
html5 input属性使用示例
2013/06/28 HTML / CSS
html5将图片转换成base64的实例代码
2016/09/21 HTML / CSS
年度考核自我鉴定
2014/03/19 职场文书
竞选部长演讲稿
2014/04/26 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
《颐和园》教学反思
2016/02/19 职场文书
Qt自定义Plot实现曲线绘制的详细过程
2021/11/02 Python
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技