vue+iview分页,调用后台接口

<div>
    <Result1 :columns="columns1" :PageData="PageData"></Result1>
    <Page :total="dataCount" prev-text="上一页" next-text="下一页" @on-change="changePage"></Page>
</div>

<script>
    export default{
        data(){
            return{
                PageData:[],
                dataCount:0,
                columns1:[]
            }
        },
        methods:{
            getPageData(){
                const idplayLength = 6;  //每页条数
                const idplayStart = idplayLength * this.page - 1;   //每页开始的第一条
                const iCols = 0;   //排序字段的个数默认为0
                const sEcho = 0;
                if (this.newText) {
                    this.cont=this.newText;
                }else {
                    this.cont=this.inputValue;
                }
                //接口名(){方法}
                findPageList(idplayLength,idplayStart,iCols,sEcho,this.cont).then(res => {
                    // console.log(res,'res');
                    this.dataCount = res.iTotal;
                    this.PageData = res.data;
                    this.page++
                }).catch(err => {})
            },
            changePage(page){
                this.page=page - 1;
                this.getPageData(page)
            }
        }
    }
</script>

 

posted @ 2019-07-02 10:04  甜甜的小可爱ha  阅读(1402)  评论(0编辑  收藏  举报