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 相关文章推荐
onkeyup,onkeydown和onkeypress的区别介绍
Oct 21 Javascript
js中各种类型的变量在if条件中是true还是false
Jul 16 Javascript
javascript格式化json显示实例分析
Apr 21 Javascript
AngularJS服务service用法总结
Dec 13 Javascript
微信小程序开发(一) 微信登录流程详解
Jan 11 Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 Javascript
基于jQuery封装的分页组件
Jun 26 jQuery
使用vue构建一个上传图片表单
Jul 04 Javascript
JS实现简易换图时钟功能分析
Jan 04 Javascript
详解使用JWT实现单点登录(完全跨域方案)
Aug 02 Javascript
基于VUE的v-charts的曲线显示功能
Oct 01 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
Oct 23 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
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
phplot生成图片类用法详解
2015/01/06 PHP
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例
2016/04/11 PHP
Yii2数据库操作常用方法小结
2017/05/04 PHP
YII框架常用技巧总结
2019/04/27 PHP
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
js修改table中Td的值(定义td的双击事件)
2013/01/10 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
js实现导航栏中英文切换效果
2017/01/16 Javascript
解决nodejs中使用http请求返回值为html时乱码的问题
2017/02/18 NodeJs
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
vue请求本地自己编写的json文件的方法
2019/04/25 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
python实现html转ubb代码(html2ubb)
2014/07/03 Python
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
Django中使用第三方登录的示例代码
2018/08/20 Python
Python魔法方法功能与用法简介
2019/04/04 Python
Python如何实现强制数据类型转换
2019/11/22 Python
python实现差分隐私Laplace机制详解
2019/11/25 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
澳大利亚实惠时尚女装商店:Katies
2019/06/16 全球购物
酒店总经理工作职责
2013/12/13 职场文书
校园餐饮创业计划书
2014/01/10 职场文书
护理专科自荐书范文
2014/02/18 职场文书
2016年4月份红领巾广播稿
2015/12/21 职场文书
python 详解turtle画爱心代码
2022/02/15 Python
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers