不用分页接口 实现分页

我以为所有页面都有分页接口 但是还真让我碰见了 记录一下

1.

       // 获取数据
         getSpecialMark() {
             getAllSpecial().then(res => {
                 this.userTableData = res.result;
                //  this.userTableDatas = res.result;
                this.total =  this.userTableData.length
                //   console.log(this.specialMarkData);
            })
        },

正常引入数据

2.

    <div class = "page">
                   <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[1, 3, 5, 10, 20]"  
                    :page-size="pagesize" 
                        :pager-count = "5"  
                        layout=" prev, pager, next,total"      
                    :total="total">   
                    </el-pagination>    
                </div>

引入分页组件

事件名称	说明	回调参数
size-change	pageSize 改变时会触发	每页条数
current-change	currentPage 改变时会触发	当前页
prev-click	用户点击上一页按钮改变当前页后触发	当前页
next-click	用户点击下一页按钮改变当前页后触发	当前页

data中

            currentPage: 1, // 初始页
            pagesize: 15,  // 初始每页的数据

定义方法

      // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
            this.pagesize = size;
            // console.log(this.pagesize)  //每页下拉显示数据
        },
        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage;
            // console.log(this.currentPage)  //点击第几页
        },

最后渲染到页面上

 <el-table
       :data="userTableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"             
      
            @row-click="rowClick" >