案例场景:
现在有个文章管理模块,在该模块中有栏目选择、文章搜索、分页功能。这些功能改变其中一个都会对查询的文章有所改变。案例图如下:
实现方案有两种:
其一、我们开始可能会想到对每个功能绑定一个处理事件,但是这样做我们对数据的维护工作将大大加大,而且用这样方案做数据的叠加筛选不是很好。
方案二、我们将所有提交的数据放到一起维护然后再进行深度监听,当某一个值、或多个值的改变时,在去进行数据的查询,此时问题也变得更易于理解与维护,具体实现如下:
分页代码如下:
<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单独拿出来进行,搜索这样解决起来比加条件简单许多。
只是我目前对多个信息筛选做出的一个解决方案、如果有更加友好的处理方法、希望能留言。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月25日
2024年09月25日
- 纯音入心系列纯音乐《天籁古筝》1CD[MP3][331MB]
- 男女对唱典藏天碟《发烧对唱·那个季节里的歌DSD》10CD[WAV]
- 群星2010-歌林精选辑[歌林][WAV+CUE]
- TrioZimbalist-PianoTriosofWeinberg,Auerbach,Dvorak(2024)[24-44,1]wav
- 群星.1992-滚石第一流台湾歌·12王牌大车拼【滚石】【WAV+CUE】
- 林子祥.1984-创作歌集【华纳】【WAV+CUE】
- 周汤豪.2010-周汤豪【华纳】【FLAC分轨】
- Mozart-TheStringQuintets-AmadeusQuartet,CecilAronowitz(2017)[24-44,1][WAV+CUE]
- JamesWilliamsDennisIrwin-Focus(2024,Red)[24-48]FLAC
- 藤泽麻衣《空みあげて》[WAV]
- 纯音入心系列纯音乐《中国古筝经典名曲》1CD[MP3][1.3GB]
- 纯音入心系列纯音乐《古筝新奏:岁月静好与筝语,细水流年与筝同》1CD[MP3][846.9MB]
- 670《脆弱敏感小女生》[320K/MP3][27.53MB]
- 曾琳.2011-好好爱我【南方】【WAV+CUE】
- 范晓萱.1995-RAIN【福茂】【WAV+CUE】