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 相关文章推荐
如何判断图片地址是否失效
Feb 02 Javascript
新浪中用来显示flash的函数
Apr 02 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
文本框水印提示效果的简单实现代码
Feb 22 Javascript
jQuery实现网页抖动的菜单抖动效果
Aug 07 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
Mar 05 Javascript
js遍历map javaScript遍历map的简单实现
Aug 26 Javascript
基于jquery实现二级联动效果
Mar 30 jQuery
微信小程序手机号码验证功能的实例代码
Aug 28 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
May 15 Javascript
JS字符串和数组如何实现相互转化
Jul 02 Javascript
TypeScript 内置高级类型编程示例
Sep 23 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
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
PHP与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
利用laravel+ajax实现文件上传功能方法示例
2017/08/13 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
学习ExtJS form布局
2009/10/08 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
2010/11/11 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
Javascript事件实例详解
2013/11/06 Javascript
javascript 动态创建表格
2015/01/08 Javascript
JavaScript分页功能的实现方法
2015/04/25 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
微信小程序后端无法保持session的原因及解决办法问题
2020/03/20 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
[01:47]2018年度DOTA2最佳教练-完美盛典
2018/12/16 DOTA
Python中3种内建数据结构:列表、元组和字典
2014/11/30 Python
Python新手在作用域方面经常容易碰到的问题
2015/04/03 Python
Python中的random()方法的使用介绍
2015/05/15 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
Python wxPython库Core组件BoxSizer用法示例
2018/09/03 Python
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
python程序实现BTC(比特币)挖矿的完整代码
2021/01/20 Python
使用Python封装excel操作指南
2021/01/29 Python
西门豹教学反思
2014/02/04 职场文书
公司门卫的岗位职责
2014/02/19 职场文书
单位工作证明范文
2014/09/14 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
基于JavaScript实现省市联动效果
2021/06/22 Javascript
JVM之方法返回地址详解
2022/02/28 Java/Android