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生成json的函数代码(可以用php的json_decode解码)
Jun 11 Javascript
JS定时关闭窗口的实例
May 22 Javascript
js点击事件链接的问题解决
Apr 25 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
Mar 22 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
Jul 22 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
html5 canvas 详细使用教程
Jan 20 Javascript
JS简单实现数组去重的方法分析
Oct 14 Javascript
JavaScript代码调试方法实例小结
Jan 05 Javascript
Vue封装的组件全局注册并引用
Jul 24 Javascript
在vue项目实现一个ctrl+f的搜索功能
Feb 28 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
YII使用url组件美化管理的方法
2015/12/28 PHP
thinkPHP多语言切换设置方法详解
2016/11/11 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
Javascript中的变量使用说明
2010/05/18 Javascript
JavaScript实现的石头剪刀布游戏源码分享
2014/08/22 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
2015/10/23 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
解析Node.js基于模块和包的代码部署方式
2016/02/16 Javascript
完美解决IE9浏览器出现的对象未定义问题
2016/09/29 Javascript
NodeJS简单实现WebSocket功能示例
2018/02/10 NodeJs
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
layui的layedit富文本赋值方法
2019/09/18 Javascript
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
Vue简单实现原理详解
2020/05/07 Javascript
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
Python实现Linux中的du命令
2017/06/12 Python
深入理解Python 关于supper 的 用法和原理
2018/02/28 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
python标准库OS模块详解
2020/03/10 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
pycharm最新激活码有效期至2100年(亲测可用)
2021/02/05 Python
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
init进程的作用
2015/08/20 面试题
JAVA中运算符的分类及举例
2015/09/12 面试题
秋季运动会稿件
2014/01/30 职场文书
学习礼仪心得体会
2014/09/01 职场文书
领导班子对照检查材料
2014/09/22 职场文书
2014年度个人总结范文
2015/03/09 职场文书
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL
vue+element ui实现锚点定位
2021/06/29 Vue.js