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 相关文章推荐
在jQuery中 常用的选择器介绍
Apr 16 Javascript
玩转方法:call和apply
May 08 Javascript
推荐一个封装好的getElementsByClassName方法
Dec 02 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
Apr 19 Javascript
JS原型链 详解及示例代码
Sep 06 Javascript
原生js仿jquery实现对Ajax的封装
Oct 04 Javascript
vue-resource 拦截器(interceptor)的使用详解
Jul 04 Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 Javascript
分析javascript原型及原型链
Mar 18 Javascript
如何从零开始利用js手写一个Promise库详解
Apr 19 Javascript
JS实现前端路由功能示例【原生路由】
May 29 Javascript
JavaScript前端开发时数值运算的小技巧
Jul 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
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
laravel 字段格式化 modle 字段类型转换方法
2019/09/30 PHP
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
2013/09/12 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
老生常谈angularjs中的$state.go
2017/04/24 Javascript
Express之get,pos请求参数的获取
2017/05/02 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
基于JS脚本语言的基础语法详解
2017/07/22 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
vue中的router-view组件的使用教程
2018/10/23 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
[02:50]【扭转乾坤,只此一招】DOTA2全新版本永雾林渊开启新篇章
2020/12/24 DOTA
python绘图方法实例入门
2015/05/19 Python
python输入错误密码用户锁定实现方法
2017/11/27 Python
Python之读取TXT文件的方法小结
2018/04/27 Python
Django实现表单验证
2018/09/08 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
Python-opencv实现红绿两色识别操作
2020/06/04 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
开发中都用到了那些设计模式?用在什么场合?
2014/08/21 面试题
给老师的检讨书
2014/02/11 职场文书
三分钟演讲稿事例
2014/03/03 职场文书
五年级下册复习计划
2015/01/19 职场文书
2015年领导班子工作总结
2015/05/23 职场文书
Golang解析JSON对象
2022/04/30 Golang
关于pytest结合csv模块实现csv格式的数据驱动问题
2022/05/30 Python