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>