案例情景：

现在有了文章管理模块，里面有栏目选择、文章搜索、分页功能。这些功能更改之一将更改查询的文章。案例图如下：

有两种实施方案：

首先，我们一开始可能会想到将一个处理事件绑定到每个函数上，但是这样做会大大增加对数据的维护，使用这种方案进行数据叠加过滤并不是很好。

方案二：我们把所有提交的数据放在一起进行维护，然后进行深度监测。当某个值或多个值发生变化时，我们查询数据，问题变得更容易理解和维护。具体实现如下：

寻呼码如下：

模板El-pagination background : page-size=' params . page size ' @ current-change=' handlepapagination change ' layout=' prev，pager，next ' : total=' total '/El-pagination/模板下拉选择框和搜索框代码如下：

模板//下拉选择框El-select v-model=' params . categoryid ' placeholder='请选择一列' size=' mini ' v-loading=' loading category ' El-options : key=' c . id ' v-for=' c in categories : label=' c . name ' : value=' c . id '/El-option/El-select//搜索框el-input placeholder='请输入关键字'前缀-icon=' El-icon-search ' v-type

导出默认{ data(){ return }.//其他数据省略了Params : {//page 33600，PageSize 33603，Categoryid 3360 undefined，keywords:undefined } }，watch : { Params 3360 { handler(val){ this . find article()；//find articles }、deep : tree//deep listing }、methods:{ //处理分页页面来源更改(page) {this。params . page=page-1；}，//查询文章findarticle () {axios。get('，{ params:this。params})。然后(()={})。catch (()={})}}总结：通过上面的双向数据绑定，我们把所有的数据放入params进行集中管理

存在的问题及解决方案：

1.这种实现方法的实现是基于所有数据和查询的。如果我们的需求是每次选择栏目都在栏目首页显示文章；

解决方案：

1.此时，我们可以向选定的列添加一个change事件，然后将page重置为第一页(此项目从第0页开始)。具体代码如下：

1.1在分页中动态绑定页面，即： current-page='(params . page 1)'

模板El-pagination background : page-size=' params . page size ' : total=' total ' layout=' prev，pager，Next ' : current-page='(params . page 1)'//动态绑定页数，有利于我们更改页数@ current-change=' handlepagination change '/El-pagination/template 1.2添加更改事件进行选择

模板//下拉选择框El-select v-model=' params。categoryid' placeholder='请选择一列' size=' mini ' @ change=' select change ' El-option : key=' c . id ' v-for=' c in categories ' 33 360 label=' c . name ' : value=' c . id '/El-option/El-select/template export default {//将页面重置为0 select change () {this。params . page=0；}，} * * *:这时候我们的问题是，如果先点击一个页面，再点击一个列，我们会根据这个页面查询所选列的信息。

第二，搜索的时候，我的理想是过滤当前页面的信息。如果有人想过滤所有的数据，那么此时我们应该单独取出关键词。搜索比添加条件简单得多。

只是我目前针对多重信息筛选做的一个解决方案。如果有更友好的处理方法，希望留言。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。