关于vue.js:ElementUI-本地分页

53次阅读

共计 645 个字符,预计需要花费 2 分钟才能阅读完成。

因为一些业务需要, 须要用到前端本地分页, 间接上代码

<el-table 
    :data="orderList.slice((pageNo-1)*pageSize,pageNo*pageSize)" 
    empty-text="暂无数据" 
    v-loading="orderLoading">
</el-table>

<div style="text-align: center;margin-top: 20px;">
    <el-pagination 
        @size-change="sizeChange" 
        @current-change="currentChange" 
        :current-page.sync="pageNo" 
        :page-sizes="[20,40,60,80,100]" 
        :page-size="pageSize" 
        layout="total, sizes, prev, pager, next, jumper" 
        :total="totalNum">
    </el-pagination>
</div>

export default {data(){
        return {orderList: [],
            pageSize: 20,
            pageNo: 1,
            totalNum: 0,
        }
    },

    methods:{getData(){// 省略...},
        sizeChange(val) {
              this.pageSize = val;
              this.pageNo = 1;
        },
        currentChange(val) {this.pageNo = val},
    },
    mounted(){this.getData();
    }
}

正文完
 0