2021-08-09 element 表格前端做分页

Hate_Cheating

于 2021-08-09 17:49:05 发布

阅读量152

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/Hate_Cheating/article/details/119507894

本文介绍如何使用Vue.js实现一个响应式的表格，配合Element UI进行分页和数据管理，同时探讨了数据获取、分页控制和页面刷新的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

     
//表格
       <el-table
            :data="
              listTableData.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              )
            "
            style="width: 100%"
            border
            :header-cell-style="headerRowClass"
            max-height="43.75rem">
         </el-table>

//分页
           <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              @next-click="nextClick"
              :current-page="currentPage"
              :page-sizes="[7, 10]"
              :page-size="pageSize"
              :pager-count="5"
              layout="prev,pager, next,sizes,total,jumper"
              :total="total"
            >
            </el-pagination>

//data 定义数据

      currentPage: 1, //当前页码
      pageSize: 7, //每页数据
      total：0//总页数

//method 方法

    //分页
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {  
     this.currentPage = val;
    },

// listTableData是表格数据