ElementUI 本地分页

Posted 2021-09-13 墨韵

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

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