文档介绍：vue
实现条件叠加搜索的解决方法
案例场景:
现在有个文章管理模块，在该模块中有栏目选择、文章搜索、分页功能。这些功能改变其中一个都会对查询的文章有所改变。案例图如下:
□
实现方案有两种：其一、我们开始可能会想到对vue
实现条件叠加搜索的解决方法
案例场景:
现在有个文章管理模块，在该模块中有栏目选择、文章搜索、分页功能。这些功能改变其中一个都会对查询的文章有所改变。案例图如下:
□
实现方案有两种：其一、我们开始可能会想到对每个功能绑定一个处理事件，但是这样做我们对数据的维护工作将大大加大，而且用这样方案做数据的叠加筛选不是很好。
方案二、我们将所有提交的数据放到一起维护然后再进行深度监听，当某一个值、或多个值的改变时，在去进行数据的查询,此时问题也变得更易于理解与维护，具体实现如下:分页代码如下:
<template>
<el-pagin
backgrou
u
ere
ut
size=""
nt-change="handlePagina
evee
e
</temp
te>
下拉选择框、
搜索框代码如下
e
te>
/下/拉选择框
<el-se
lec
ve请选择栏目
v
ng="loadingCategory">
<el-o
ev
</el-s
el
ect>
/搜/索框
<el-in
pu
请输入关键字e
e
icon="el-icon-search"
v
el
=""
e
ble>
</el-i
ut>
</temp
te>
数据维护
与方法(事件处理)
export
efault{
eu
其它的数据省略
存储分页、搜索数据
e:
eS
ize:3,
eg
oryId:undefined,
e
rds:undefined
e"='pmliancie'holde
egorie
e":value
handler(val)
查找文章
ee深度监听
methods:{
处理分页
e(page
e
查询文章
findArticle(){
('',{params:})
.then(()=>{})
.catch(()=>{})
}
}
}
小结：通过上面的双向数据绑定、我们将所有数据放到params中集中管理(进行数据的监听)、当数据发生改变时我们去请求数据，来局部更新表格中的数据。
存在问题与解决：
1•这种实现方法的实现是基于所有数据的和查询、如果我们的需求是，当每次选择栏目时，都要显示第一页栏目的文章
解决方案：
一、此时我们可以给选择的栏目力Change事件、然后将page重置为第一页(本项目是从第0页开始)，具体代码如下：
：：current-page="(+1)"
<template>
<el-pagination
background
：page-size="p