ElementUI 本地分页

Posted 墨韵

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ElementUI 本地分页相关的知识,希望对你有一定的参考价值。

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

<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();
    }
}

以上是关于ElementUI 本地分页的主要内容,如果未能解决你的问题,请参考以下文章

elementUI实现分页功能

elementUI实现分页功能

elementUI 表格分页后台排序记录

五:Vue之ElementUI 表格Table与分页Pagination组件化

一个常见的elementUI表格,从后端获取数据并分页及查询

2021-04-25elementUI表格拖拽排序