分页查询的时候,在第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>
  
Logo

前往低代码交流专区

更多推荐