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内核之基本概念
Oct 21 Javascript
JavaScript入门之事件、cookie、定时等
Oct 21 Javascript
js判断两个日期是否相等的方法
Sep 10 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
jQuery插件MixItUp实现动画过滤和排序
Apr 12 Javascript
AngularJS模块管理问题的非常规处理方法
Apr 29 Javascript
javascript框架设计之种子模块
Jun 23 Javascript
jQuery xml字符串的解析、读取及查找方法
Mar 01 Javascript
开启BootStrap学习之旅
May 04 Javascript
微信小程序支付及退款流程详解
Nov 30 Javascript
深入理解node.js http模块
Jan 24 Javascript
JS html事件冒泡和事件捕获操作示例
May 01 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
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
Zend Framework入门教程之Zend_Db数据库操作详解
2016/12/08 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
ExtJs 表单提交登陆实现代码
2010/08/19 Javascript
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
jquery中prop()方法和attr()方法的区别浅析
2013/09/06 Javascript
JavaScript对象的property属性详解
2014/04/01 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
jQuery替换textarea中换行的方法
2015/06/10 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
JS实现方形抽奖效果
2018/08/27 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
vue-router的钩子函数用法实例分析
2019/10/26 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
微信小程序学习总结(五)常见问题实例小结
2020/06/04 Javascript
python调用java的Webservice示例
2014/03/10 Python
python实现合并两个数组的方法
2015/05/16 Python
代码分析Python地图坐标转换
2018/02/08 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
tensorflow-gpu安装的常见问题及解决方案
2020/01/20 Python
pycharm通过ssh连接远程服务器教程
2020/02/12 Python
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
越南母婴用品购物网站:Kids Plaza
2020/04/09 全球购物
库房主管岗位职责
2013/12/31 职场文书
技术经济专业求职信
2014/09/03 职场文书
单位考核鉴定意见
2015/06/05 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
学校运动会开幕词
2016/03/03 职场文书