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 相关文章推荐
JS在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 Javascript
jquery 学习之二 属性相关
Nov 23 Javascript
用js实现控件的隐藏及style.visibility的使用
Jun 14 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
Sep 29 Javascript
js动态修改input输入框的type属性(实现方法解析)
Nov 13 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
Oct 17 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
老生常谈JavaScript中的this关键字
Oct 01 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
Mar 01 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
Apr 11 Javascript
AngularJS 验证码60秒倒计时功能的实现
Jun 05 Javascript
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
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
YII Framework框架教程之缓存用法详解
2016/03/14 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
PHP Primary script unknown 解决方法总结
2019/08/22 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
jquery插件制作简单示例说明
2012/02/03 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
javascript实现树形菜单的方法
2015/07/17 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
2015/07/27 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
2015/09/17 Javascript
解决wx.onMenuShareTimeline出现的问题
2016/08/16 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
2017/03/19 Javascript
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
python多线程编程中的join函数使用心得
2014/09/02 Python
Python 中 list 的各项操作技巧
2017/04/13 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
python实现超市扫码仪计费
2018/05/30 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
戴森香港官方网站:Dyson香港
2021/02/11 全球购物
int和Integer有什么区别
2013/05/25 面试题
客户答谢会活动方案
2014/08/31 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
2016学习雷锋精神活动倡议书
2015/04/27 职场文书
sql时间段切分实现每隔x分钟出一份高速门架车流量
2022/02/28 SQL Server