vue+iview 分頁及查詢功能實現

vue+iview 分頁及刪、查功能實現

​ 首先要想實現分頁功能必須得知道 當前頁碼、每頁大小、總數目。

iview對分頁的功能支持還是很強大的，有很多鉤子函數

具體實現看後端返回的數據

<template>
    <div v-if="this.$store.state.user.userType == 0 || this.$store.state.user.userType == 1">
        <Input type="text" search enter-button placeholder="根據施工人員姓名查找" v-model="peopleName" @input="search"/>
        <Table width="100%"  :columns="peopleCol" :data="peopleDat"></Table>
        <!--通過sync修飾符可以動態獲取頁碼-->
        <Page :total="dataCount" :current.sync="current" :page-size="pageSize" show-total class="paging" @on-change="changePage"></Page>
        
       <!--該modal是刪除提醒框-->
        <Modal v-model="confirmDelete" width="360">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="ios-information-circle"></Icon>
                <span>刪除確認</span>
            </p>
            <div style="text-align:center">
                <p>此操作不可恢復，確定要刪除嗎？</p>
            </div>
            <div slot="footer">
                <Button  size="large"  @click="cancelDelete">取消</Button>
                <Button type="error" size="large"  @click="deleteConfirm">刪除</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    export default {
        components: {
            addWorker,
            updateWorker
        },
        data () {
            return {
                selectedID:'',//刪除選中的ID
                confirmDelete:false,//刪除提示框
                current:1,
                isShow:false,
                selectedList:{},//選中施工人員的id值
                peopleName:'',
                dataCount:0,//總條數
                pageSize:2,//每頁顯示數據條數
                peopleDat: [],
                peopleCol: [
                    {
                        title: '操作',
                        key: 'action',
                        width: 120,
                        render: (h, params) => {
                            return h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on:{
                                        click: ()=>{
                                            this.confirmDelete=true
                                            this.delete(params.row.peopleID)
                                        }
                                    }
                                }, '刪除')
                        }
                    }
                ],
            }
        },
        mounted() {
            this.getWorkerList()
        },
        methods:{
            getWorkerList(){//組件初始化顯示的數據
                const currPage=1
                const pageSize=this.pageSize
                //下面是向後臺發送請求
                setTimeout(async()=>{
                 const r=await getWorkers(currPage,pageSize)
                    if(r.data.success){
                        this.dataCount=r.data.list.count//初始化總條數
                        this.peopleDat=r.data.list.data//默認頁列表渲染數據
                        console.log(r)
                    }
                })
            },
            changePage(index){//頁碼改變觸發的函數
              //index當前頁碼
                const currPage=index
                const pageSize=this.pageSize
                setTimeout(async ()=>{
                    const r=await changePage(currPage,pageSize)
                    if(r.data.success){
                        this.peopleDat=r.data.list.data//當前頁列表數據
                    }
                })
            },
            search(){
                const peopleName=this.peopleName
                const pageSize=this.pageSize
                setTimeout(async()=>{
                    const r=await search(peopleName,pageSize)
                    if(r.data.success){
                        this.peopleDat=r.data.list.data
                        this.dataCount=r.data.list.count//如果不設置總條數那麼當精確查詢時每頁都會有數據這得看後端返回的數據有沒有這些數據
                    } else {
                        this.$Message.warning('查詢失敗!')
                    }
                })
            },
            delete(peopleID){
                this.selectedID=peopleID
            },
            deleteConfirm(){
                const id=this.selectedID
                setTimeout(async ()=>{
                    const r=await deleteWorker(id)
                    if(r.data.success){
                        //這裏做的一個功能是當你刪除某頁數據後立即刷新當前頁的數據
                        this.changePage(this.current)//更新當前頁碼的數據
                        this.$Message.success('刪除成功!')
                    } else{
                        this.$Message.warning('刪除失敗!')
                    }
                })
                this.confirmDelete=false
            },
            cancelDelete(){
                this.confirmDelete=false
                this.$Message.info('你取消了刪除操作')
            }
        }
    }
</script>
<style scoped>
    .paging{
        float:left;
        margin-top:10px;
    }
</style>