iview+vue查询分页实现

<template>
<div>
<h2>{{pdbTitle}}</h2>
<Form ref="searchform" :model="applysearchData" :label-width="120" inline>
<FormItem :label="labelName.srch1" prop="id">
<i-input v-model="applysearchData.id"/>
</FormItem>
// 注意：特意写一下这个select组件
// 这个地方select status选项要在搜索的时候对绑定的值进行特殊处理（重置为 ''）,不然在搜索的时候会是undefined
<FormItem :label="labelName.srch2" prop="status">
<Select v-model="applysearchData.status">
<Option value="100">a</Option>
<Option value="200">b</Option>
<Option value="300">c</Option>
</Select>
</FormItem>
<FormItem>
<Button @click="searchInfo('searchform')">查询</Button>
<Button @click="handleReset('searchform')">清除条件</Button>
</FormItem/>
</Form>
</div>
</template>
<script>
export default {
// 接收父组件传递过来的搜索参数
props:{
pdbTitle:{
type:String
},
applysearchData:{
type:Object
}
},
watch:{
// 注意：seletct组件的status值为undefined的时候需要把它重置为空字符串，这样搜索的时候才会成功
// 因为此处的表单的值为父组件传递过来的，所以要在父组件中去修改status
'applysearchData.status'(newValue,oldValue){
if(newValue === undefined){
this.$emit('changeStatus')
}
},
// 在切换页码的时候监听查询表单数据的变化，如果有变化需要把current重置为1
applysearchData:{
handler(a,b){
if(a){
this.$emit('changeCurrent')
}
},
deep:true
}
},
methods:{
// 搜索
searchInfo(applysearchform){
this.$emit('searchInfo');
},
// 重置，注意这里也要触发一下修改status的方法
handleReset(applysearchform){
this.$refs[applysearchform].resetFields();
this.$emit('changeStatus')
}
}
}
</script>

<template>
<search-form :pdbTitle="pdbTitle" :labelName="labelName" @searchInfo="searchInfo" :applysearchData="applysearchData" @changeStatus="changeStatus" @changeCurrent="changeCurrent"></search-form>
<Page :total="searchPages.total" :current="searchPages.current" :page-size="searchPages.size" show-elevator show-total @on-change="initChangePage"/>
<Table :loading="loading" border :columns="columns" :data="tableData"/>
</template>
<script>
import searchFrom from './searchForm'
export default {
components:{
searchForm
},
data(){
return {
columns:[....],
pdbTitle:'信息2',
// 搜索表单的数据
applysearchData:{
id:'',
status:'' // 为select的值，根据需求也可以给一个默认值
},
tableData:[],
searchPages:{
size:5,
total:0,
current:1
}
}
},
created(){
this.searchInfo()
},
methods:{
initChangePage(val){
this.searchPages.current = val
},
changeCurrent(){ // 关键点，把当前也设置为1
this.searchPages.current = 1
},
changeStatus(){ // 关键点，处理status
this.applysearchData.status = ''
},
searchInfo(){
// 发送请求获取数据
}
}
}
</script>