vue中elementUi筛选后分页页码恢复到第一页

分页查询的时候，在第4页添加筛选条件查询后。返回了新数据，展示的是第一页数据但分页页码还是第四页。正确应为第1页

解决思路：条件筛选后将当前currentPage改为1

1.实现代码

<template><div><el-formref="searchForm":model="searchForm"label-width="140px"size="mini"label-position="top"class="search-container"><el-form-item label="caseID" prop="id"><el-input v-model="searchForm.id" /></el-form-item><el-form-item label="caseName" prop="name"><el-input v-model="searchForm.name"/></el-form-item><el-form-item class="search-button-group"><el-button type="primary" @click="onSubmit">{{ 'query'}}</el-button><el-button @click="resetForm('searchForm')">{{ 'reset'}}</el-button></el-form-item></el-form><el-table>...</el-table><el-pagination:total="totalCount"layout="total, sizes, prev, pager, next, jumper":page-size="100":current-page="currentPage":page-sizes="[10, 20, 30, 40]"@size-change="handleSizeChange"@current-change="handleCurrentChange"/>/></div>
</template>
<script>
import pagination from '@/components/pagination'
export default {components: { pagination},data () {return {searchForm:{},totalCount: 0,currentPage: 1,pageSize: 10,searchParams: ''}},methods: {// 查询数据,serachFlag为true时pageIndex改为1，totalCount为0fetchData (val, serachFlag) {this.searchParams = valconst filterMap = valthis.currentPage = serachFlag ? 1 : this.currentPagethis.totalCount = serachFlag ? 0 : this.totalCount// 调接口...},handleSizeChange (val) {this.pageSize = valthis.fetchData(this.searchParams)},handleCurrentChange (val) {this.pageIndex = valthis.fetchData(this.searchParams)},// 表单筛选查询onSubmit () {const params = JSON.parse(JSON.stringify(this.searchForm))this.$emit('fetchData', params, true)},// 清空搜索表单resetForm (formName) {this.$refs[formName].resetFields()this.searchForm = {}}}
}
</script>

vue中elementUi筛选后分页页码恢复到第一页相关推荐

SQL Server中的筛选后的统计信息和CE模型变化
In this blog post, we are going to view some interesting model variation, that I've found while expl ...
word设置页码不在第一页开始；删除页眉横线的小技巧
(word 2003下操作)上网找如何在WORD中设置页码不在第一页开始,如何删除页眉横线等等细节操作.既然发觉有些都系讲得不明不白,可能是自己理解问题,用自己的语言总结下: WORD中设置页码不在第 ...
vue 中 Element-UI 表单验证的几种方法
在开始之前需要把element-ui在vue中引入好,如果没有引入好的话,需要先跟着element-ui的文档进行操作,接下来就可以进行学习了. 第一种:在el-form-item单个添加验证这种方 ...
在Excel中数据筛选后如何拷贝粘贴
数据筛选后按F5 或者在查找和选择里找到定位条件,选择可见单元格,再复制
word2003设置页码不从第一页开始的方法
问题描述:如果你想设置页码从第三四页开始,前边不要页码,或者前边的页码是不同类型的.那么这个时候就要用到:插入->分隔符模式. 如果你的页面中的各个标题是从样式和格式中选择的,既是你先设置好各种 ...
Word设置页码格式为共页第页，附带页码不从第一页开始的教程
最近在写毕业论文,好久没使用Word了,突然发现页码设置忘记了,趁这次机会,把设置的过程记录下来,顺便分享给大家! 一.将目录页和正文用分隔符分隔,操作如下: 1.点击目录页,让光标停留在目录页 2. ...
如何为word增加页码，且第一页不显示页码？
1.打开一个word文档,点击插入,选择页码,最右侧 2.点击页码,选择需要的格式 3.点击后,发现页码已经插入,在中部模式,此时第一页也有页码1 4.去除第一页页码,点击页码,下拉选定页码格式,将起 ...
vue中element-ui table滚动加载
//1.在main.js里注册Vue.directive('loadmore', {bind(el, binding) {const selectWrap = el.querySelector('.e ...
实习总结第七谈-----------vue中element-ui的表格行高怎么控制
依旧在我负责的当前项目中举例子: 我的表格要求是一页只显示10条数据,且纵向不能产生滚动条,这样就意味着不能设置表格的整体高度来控制,那样会会产生滚动条,要么在表格纵向产生滚动条,要么在屏幕纵向产生滚 ...

vue中elementUi筛选后分页页码恢复到第一页

vue中elementUi筛选后分页页码恢复到第一页相关推荐

最新文章

热门文章