---

前言

提示：前端做假分页，只限于适用的场景和数据或列表展示，不适用操作和编辑，望周知。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、使用步骤

1.element分页代码

代码如下（示例）：

<div class="pagination-container">
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
</div>

data 中定义的变量
data(){
    return{
        currentPage:1, //初始页
        pagesize:10, //每页的数据　
        total:0,//总条数
        resultsData:[],//后台数据
        newArry:[]//循环数据
    }
},

2.js代码

代码如下（示例）：

methods: {
    handleSizeChange: function (size) {
        this.pagesize = size;
        this.getResultsData();
    },
    handleCurrentChange: function (page) {
        this.currentPage = page;
        this.getResultsData();
    },
    //前端自己分页
    getResultsData: function () {
        // this指向改一下
        var that = this;
        var list = that.resultsData; //后端回来表格的数据
        //渲染的数据newArry赋值
        this.newArry= list.filter(
        (item, index) =>
            index < that.currentPage * that.pagesize &&
            index >= that.pagesize * (that.currentPage - 1)
        ); //根据页数显示相应的内容
        this.total = list.length;
    },
},

该处getResultsData()方法需要在请求接口里调用，页面初始化完调用。
newArry这个数组是循环列表或者循环li使用，v-for直接可以使用，我的项目是ul li去展示，就直接写上去就ok

3.参考链接

前端做假分页，不请求后台

---

总结

Vue +Element UI 前端做假分页，不请求后台数据，只限于适用的场景和数据或列表展示使用，不适用操作和编辑。