vue搜索与分页问题

那就不要直接把和搜索框双向绑定的值拿来用，只有当点击搜索按钮时，才把值赋给params里的searchContent，再传给requestData(params)请求数据。

方法写几个字段的形参，每次刷新页面或者点击搜索，把搜索框的值或者没有的话给个空字符串，传给方法，方法里拼接字符串把下一页 上一页 调用方法的参数，用形参拼上去，应该就没你这奇怪的问题了(我大三，学后端的，说错了别怪我)

<template>
<div class="app-container">
<div class="filter-container">
<el-input v-model="tempQuery.params.name" placeholder="发起人" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
<el-select v-model="tempQuery.params.formId" placeholder="流程表单" style="width: 200px;" class="filter-item">
<el-option
v-for="item in forms"
:key="item.id"
:label="item.name"
:value="item.id"></el-option>
</el-select>
<el-select v-model="tempQuery.params.status" placeholder="流程状态" style="width: 200px;" class="filter-item">
<el-option
v-for="item in statusOptions"
:key="item.value"
:label="item.label"
:value="item.value"></el-option>
</el-select>
<el-button v-waves class="filter-item ml10" plain type="primary" icon="el-icon-search" @click="handleFilter">
搜索
</el-button>
</div>
<el-table
:key="tableKey"
v-loading="listLoading"
:data="list"
:stripe="true"
fit
highlight-current-row
style="width: 100%;"
@sort-change="sortChange"
>
<el-table-column label="发起人" min-width="150" align="center" prop="createUser">
</el-table-column>
<el-table-column label="发起时间" min-width="150" align="center" prop="createDate">
</el-table-column>
<el-table-column label="流程名" min-width="150" align="center" prop="name">
</el-table-column>
<el-table-column label="当前审核人" min-width="150" align="center" prop="currentUser">
</el-table-column>
<el-table-column label="操作" align="center" min-width="200" class-name="small-padding fixed-width">
<template slot-scope="{row}">
<span class="table-cell-btn" @click="gotoDetail(row)">
<i><svg-icon icon-class="look"/></i>查看
</span>
</template>
</el-table-column>
</el-table>
<pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList"/>
</div>
</template>
<script>
import { page } from '@/api/flow/instance'
import { findAllForms } from '@/api/flow/form'
import { convertToPageRequest } from '@/utils/page-request'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/zbComponents/Pagination' // secondary package based on el-pagination
export default {
name: 'BizDomainTable',
components: { Pagination },
directives: { waves },
data () {
return {
tableKey: 0,
list: null,
total: 0,
listLoading: true,
tempQuery:{
params: {
name: '',
formId: '',
status: ''
}
},
listQuery: {
pageNum: 1,
pageSize: 10,
params: {
name: '',
formId: '',
status: ''
}
},
statusOptions: [
{ value: '', label: '全部' },
{ value: '1', label: '审批中' },
{ value: '2', label: '审批通过' },
{ value: '3', label: '结束' },
{ value: '4', label: '被退回' }
],
forms: []
}
},
created () {
this.getList()
this.getForms()
},
methods: {
getList () {
this.listLoading = true
page(convertToPageRequest(this.listQuery)).then(response => {
this.list = response.result.content
this.total = response.result.total
this.listLoading = false
})
},
getForms () {
findAllForms().then(response => {
this.forms = response.result
})
},
handleFilter () {
this.listQuery.pageNum = 1
this.listQuery.params.name=this.tempQuery.params.name
this.listQuery.params.status=this.tempQuery.params.status
this.listQuery.params.formId=this.tempQuery.params.formId
this.getList()
},
gotoDetail (row) {
this.$router.push({path: 'instance-detail', query: { instanceId: row.id }})
},
sortChange (data) {
}
}
}
</script>