vue中elementUi筛选后分页页码恢复到第一页
使用element做分页查询时解决添加筛选条件后页码没回到第一页
·
分页查询的时候,在第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>
更多推荐
已为社区贡献2条内容
所有评论(0)