vue 点击按钮筛选功能_vue实现前端列表多条件筛选
本文实例为大家分享了vue实现前端列表多条件筛选的具体代码,供大家参考,具体内容如下
1、先上图:
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实战教程》
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
时间: 2020-10-26
vue 点击按钮筛选功能_vue实现前端列表多条件筛选相关推荐
- PHP实现列表页综合筛选功能,dede织梦列表页联动筛选方法功能的实现
[DEDECMS.织梦开源程序已经成为市场上主流仿站开源代码,它能够非常快速的放置一个已经建立好的网站,但是前提是这些网站比较简单,没有一些复杂的功能,那么使用DEDECMS仿站是最快速,最有效的.而 ...
- vue中点击按钮切换图片
vue中点击按钮切换图片 直接附上代码,亲测有效 <!-- --> <template><div><div class="">< ...
- React Native实现一个带筛选功能的搜房列表(2)
原文链接React Native实现一个带筛选功能的搜房列表(2) 在上一篇中,我们实现了一个下拉刷新和上拉加载更多的列表,那根据一般的开发步骤,接着应该就是进行网络请求,在网络请求之后更新列表数据和 ...
- php多条件筛选前台功能,JavaScript前端数据多条件筛选功能实现代码
有时候也会需要在前端进行数据筛选,增强交互体验.当数据可用的筛选条件较多时,把逻辑写死会给后期维护带来很*烦.下面是我自己写的一个简单的筛选器,筛选条件可以根据数据包含的字段动态设置.本文主要为大家详 ...
- 如何使用计算机自动筛选功能,2009计算机一级:Excel自动筛选小技巧
2009计算机一级:Excel自动筛选小技巧 分类:计算机等级 | 更新时间:2016-07-07| 来源:中华网考试 前两日需要短时间内汇总excle表中的数据,却发现自动筛选的功能怎么也用不了,急 ...
- vue点击事件, 循环出来的关注列表 ,点击只关注其中一个并改变样式
vue点击事件, 循环出来的关注列表 ,点击只关注其中一个并改变样式 这个适合大家参考,你们要是直接复制粘贴的话效果是出不来的,因为里面用了组件和api, <template><ul ...
- 【定区管理功能】定区列表分页条件查询
[定区管理功能]定区列表分页条件查询 修改fixed_area.html页面,点击查询窗口中的查询按钮,将查询表单数据转换为json,绑定到datagrid上. //定区数据表格 $('#grid') ...
- vue点击按钮怎么跳转图片_vue页面跳转
一.在template中的常见写法: 点击跳转 二.在js中设置跳转(在方法中跳转界面并传参,两种方式:params 与 query): 有时候我们需要的是点击按钮跳出弹窗,选择判断后进行跳转,我们常 ...
- vue点击按钮切换显示不同内容_邂逅Vue
01 什么是Vue.js Vue (读音 /vjuː/,类似于view) 是一套用于构建用户界面的渐进式框架. 看到这里,你就会问了,什么是渐进式? 渐进式就是你可以将Vue作为一个项目中的部分组件改 ...
最新文章
- 安全研究人员最爱的12款Linux发行版
- python后端从数据库请求数据给到前端的具体实现
- oj题 根据化学方程式计算摩尔质量
- Python学习 Day 1-简介 安装 Hello world
- 文字处理技术:最小布局
- 邮政社招笔试题库_中国邮政招聘笔试:笔试练习题1
- 50多款51单片机程序源码原理图编程源代码
- 宿舍管理系统【C语言建工程及多文件练习】
- 立项、合同、项目章程、可行性分析、建设方案、项目范围、关系等比较重要的部分
- 拍视频到底用手机还是相机好?
- 计算机视觉物体识别的过程,(物体识别过程.doc
- HDU 1695(数论,筛选+素因子分解+容斥)
- 高盛:DeFi 的互操作性可能会增加系统性风险
- 红帽linux内核修复,红帽Linux 7和CentOS 7的新Linux内核更新修复两个错误
- JAVA-ApplicationContext的使用
- 如何在sql内写循环语句
- 为什么数据库具有很高的独立性
- Chino with Train to the Rabbit Town
- 最新java开发工具_2019 最新 Java 开发工具教程,都在这了
- ADS设计日志(一):阻抗变换器详讲