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>