vue+element-ui写table的分页

最新推荐文章于 2024-08-01 17:00:44 发布

Belle唯唯

最新推荐文章于 2024-08-01 17:00:44 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/weixin_36869329/article/details/81940197

版权

<el-table :data="recentJobList.slice((currentPage-1)*pageSize, currentPage*pageSize)" style="width: 100%">
            <el-table-column prop="name" label="name" width="280">
            </el-table-column>
            <el-table-column prop="startDate" label="startDate" width="500">
            </el-table-column>
            <el-table-column prop="endDate" label="endDate" width="500">
            </el-table-column>
            <el-table-column prop="elapsed" label="Elapsed" width="300">
            </el-table-column>
            <el-table-column prop="status" label="Status">
            </el-table-column>
        </el-table>

        <div class="block">
            <span class="demonstration">Rows per page</span><br />
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-sizes="[3, 4, 5, 6]" :page-size="pageSize" layout="sizes, prev, pager, next" :total="recentJobList.length">
            </el-pagination>
        </div>

  handleSizeChange(size){
            this.pageSize=size
          },
          handleCurrentChange(val){
            this.currentPage=val
          }

       },
       mounted(){

        this.getJson()


       },

        data() {
            return {
                totalHours: 250,
                totalStorageUsed: "250TB",
                pageSize:3,
                currentPage:1

            }