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>