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让IE浏览器event对象符合W3C DOM标准
Nov 24 Javascript
javascript写的一个模拟阅读小说的程序
Apr 04 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
Feb 26 Javascript
JavaScript操作DOM元素的childNodes和children区别
Apr 01 Javascript
JS实现可展开折叠层的鼠标拖曳效果
Oct 09 Javascript
vue登录路由验证的实现
Dec 13 Javascript
vue中的计算属性实例详解
Sep 19 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 Javascript
Vue实现点击显示不同图片的效果
Aug 10 Javascript
jQuery实现雪花飘落效果
Aug 02 jQuery
谈谈JavaScript中的垃圾回收机制
Sep 17 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
使用PHP获取网络文件的实现代码
2010/01/01 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
php判断文件夹是否存在不存在则创建
2015/04/09 PHP
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
Extjs grid panel自带滚动条失效的解决方法
2014/09/11 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
2014/11/20 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
2016/12/07 Javascript
JavaScript高阶函数_动力节点Java学院整理
2017/06/28 Javascript
详解jQuery中的isPlainObject()使用方法
2018/02/27 jQuery
微信小程序实现文字从右向左无限滚动
2020/11/18 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
Tensorflow 合并通道及加载子模型的方法
2018/07/26 Python
python numpy 常用随机数的产生方法的实现
2019/08/21 Python
pandas中的数据去重处理的实现方法
2020/02/10 Python
pycharm的python_stubs问题
2020/04/08 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
芬兰灯具网上商店:Nettilamppu.fi
2018/06/30 全球购物
银行个人求职自荐信范文
2013/12/16 职场文书
酒店经理职责
2014/01/30 职场文书
采购意向书范本
2014/03/31 职场文书
村长贪污检举信
2014/04/04 职场文书
优秀驾驶员先进事迹材料
2014/05/04 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书
学校运动会开幕词
2016/03/03 职场文书
redis 查看所有的key方式
2021/05/07 Redis
深入理解Pytorch微调torchvision模型
2021/11/11 Python
OpenCV实现常见的四种图像几何变换
2022/04/01 Python