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

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

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

1.实现代码

<template>
	<div>
		 <el-form
		    ref="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为0
	   	fetchData (val, serachFlag) {
	      this.searchParams = val
	      const filterMap = val
	      this.currentPage = serachFlag ? 1 : this.currentPage
	      this.totalCount = serachFlag ? 0 : this.totalCount
	      // 调接口
	      ...
	    },
	    handleSizeChange (val) {
	     this.pageSize = val
	     this.fetchData(this.searchParams)
	   },
	    handleCurrentChange (val) {
	     this.pageIndex = val
	     this.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>
  
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值