vue实现条件叠加搜索的解决方法


Posted in Javascript onMay 28, 2019

案例场景:

现在有个文章管理模块,在该模块中有栏目选择、文章搜索、分页功能。这些功能改变其中一个都会对查询的文章有所改变。案例图如下:

vue实现条件叠加搜索的解决方法

实现方案有两种:

其一、我们开始可能会想到对每个功能绑定一个处理事件,但是这样做我们对数据的维护工作将大大加大,而且用这样方案做数据的叠加筛选不是很好。

方案二、我们将所有提交的数据放到一起维护然后再进行深度监听,当某一个值、或多个值的改变时,在去进行数据的查询,此时问题也变得更易于理解与维护,具体实现如下:

分页代码如下:

<template>
 <el-pagination
  background
  :page-size="params.pageSize"
  @current-change="handlePaginationChange"
  layout="prev, pager, next"
  :total="total">
 </el-pagination>
</template>

下拉选择框、搜索框代码如下: 

<template>
//下拉选择框
<el-select v-model="params.categoryId" placeholder="请选择栏目" size='mini'
 v-loading="loadingCategory">
 <el-option :key='c.id' v-for='c in categories' :label="c.name" :value="c.id"></el-option>
</el-select>
 
//搜索框
<el-input placeholder="请输入关键字"
 prefix-icon="el-icon-search"
 v-model="params.keywords"
  clearable>
</el-input>
</template>

数据维护、与方法(事件处理)

export default{
 data(){
  return{
   ... //其它的数据省略
 
   params:{ //存储分页、搜索数据
   page:0,
   pageSize:3,
   categoryId:undefined,
   keywords:undefined
   }
  }
 },
 watch:{
 params:{
  handler(val){
   this.findArticle(); //查找文章
  },
  deep:true //深度监听
 },
 methods:{
  //处理分页
  handlePaginationChange(page){
   this.params.page=page-1;
  }, 
  //查询文章
  findArticle(){
   axios.get('',{params:this.params})
   .then(()=>{})
   .catch(()=>{})
  }
 }
 
}

小结:通过上面的双向数据绑定、我们将所有数据放到 params中集中管理(进行数据的监听)、当数据发生改变时我们去请求数据,来局部更新表格中的数据。

存在问题与解决:

1.这种实现方法的实现是基于所有数据的和查询、如果我们的需求是,当每次选择栏目时,都要显示第一页栏目的文章;

解决方案:

一、此时我们可以给选择的栏目加change事件、然后将page重置为第一页(本项目是从第0页开始),具体代码如下:

1.1 将分页中动态绑定page  即:  :current-page="(params.page+1)"

<template>
 <el-pagination
  background
  :page-size="params.pageSize"
  :total="total"
  layout="prev, pager, next"
  :current-page="(params.page+1)" //将页数进行动态绑定这样利于我们操作页数的改变
  @current-change="handlePaginationChange"
  >
 </el-pagination>
 
</template>

1.2  给select添加change事件

<template> 
 //下拉选择框
 <el-select v-model="params.categoryId" placeholder="请选择栏目" size='mini'
   @change="selectChange"
  >
  <el-option :key='c.id' v-for='c in categories' :label="c.name" :value="c.id">
  </el-option>
 </el-select>
</template>
 
export default{
 //重置page为0
 selectChange(){
  this.params.page=0;
 },
}

***:此时我们存在的问题是如果我们先点击某一页后然后再点击栏目,那么会基于本页去查询选择栏目的信息。

二、关于搜索时我的理想是对当前页信息进行筛选、如果有人想要做出对所有数据的筛选、那么此时我们应该将keywords单独拿出来进行,搜索这样解决起来比加条件简单许多。

只是我目前对多个信息筛选做出的一个解决方案、如果有更加友好的处理方法、希望能留言。

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

Javascript 相关文章推荐
javascript 新浪背投广告实现代码
Jul 07 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
Apr 07 Javascript
bootstrap栅格系统示例代码分享
May 22 Javascript
express框架实现基于Websocket建立的简易聊天室
Aug 10 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
Nov 29 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
React 路由懒加载的几种实现方案
Oct 23 Javascript
vue实现计步器功能
Nov 01 Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 Javascript
JS如何实现动态添加的元素绑定事件
Nov 12 Javascript
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
webpack4 从零学习常用配置(小结)
May 28 #Javascript
详解ES6 export default 和 import语句中的解构赋值
May 28 #Javascript
jQuery实现高级检索功能
May 28 #jQuery
利用原生JS实现data方法示例代码
May 28 #Javascript
php结合js实现多条件组合查询
May 28 #Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 #Javascript
js 将线性数据转为树形的示例代码
May 28 #Javascript
You might like
PHP的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
php使用curl并发减少后端访问时间的方法分析
2016/05/12 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
解决laravel查询构造器中的别名问题
2019/10/17 PHP
JS 分号引起的一段调试问题
2009/06/18 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
2014/01/09 Javascript
js中传递特殊字符(+,&amp;)的方法
2014/01/16 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
jQuery EasyUI datagrid实现本地分页的方法
2015/02/13 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
2015/10/28 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
Vue 仿百度搜索功能实现代码
2017/02/16 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
2017/04/14 jQuery
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
Python实现的一个简单LRU cache
2014/09/26 Python
python实现查询苹果手机维修进度
2015/03/16 Python
使用Python实现一个简单的项目监控
2015/03/31 Python
python实现播放音频和录音功能示例代码
2018/12/30 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
Yves Rocher伊夫·黎雪美国官网:法国始创植物美肌1959
2019/01/09 全球购物
医院总经理职责
2013/12/26 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
2014小学语文教学工作总结
2014/12/17 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
农村房屋租赁合同(范本)
2019/07/23 职场文书
家电创业计划书
2019/08/05 职场文书