element-plus表格前端实现分页效果

文章目录

需求

对表格中的数据进行本地分页,不调用接口

分析

  • html
javascript 复制代码
<el-table fit :cell-style="{ textAlign: 'center' }" :data="tableData" style="width: 100%" height="350"
   :header-cell-style="{
     background: '#f7f7f7',
     color: 'rgba(0,0,0,.85)',
     'font-weight': '500',
     'text-align': 'center'
   }" v-loading="loading">
   <el-table-column prop="originalPointName" label="观测点名称">
   </el-table-column>
   <el-table-column prop="sectionName" label="位置">
   </el-table-column>
   <el-table-column prop="x0" label="X0">
   </el-table-column>
   <el-table-column prop="y0" label="Y0">
   </el-table-column>
   <el-table-column prop="h0" label="H0">
   </el-table-column>
 </el-table>
 <el-pagination :current-page="pagination.currentPage" :page-size="pagination.pageSize" :total="pagination.total"
   layout="prev, pager, next ,total" @current-change="handleCurrentChange" />
  • data
javascript 复制代码
// 表格数据
tableDatas: [],
tableData: [],

pagination: {
  total: 0,
  currentPage: 1,
  pageSize: 10
},
loading: false
  • methods
javascript 复制代码
接口调用(){
	this.loading = false
	const key1 = this.tabList[0].name
	this.tableDatas = res.data[key1]
	this.pagination.total = this.tableDatas.length
	this.handleCurrentChange(1)
}

)

javascript 复制代码
// 页数切换
    handleCurrentChange (e) {
      this.pagination.currentPage = e
      const start = (this.pagination.currentPage - 1) * 10;
      const end = start + 10;
      this.tableData = this.tableDatas.slice(start, end);
    },
相关推荐
蓝倾19 分钟前
淘宝批量获取商品SKU实战案例
前端·后端·api
comelong24 分钟前
Docker容器启动postgres端口映射失败问题
前端
花海如潮淹26 分钟前
硬件产品研发管理工具实战指南
前端·python
用户38022585982426 分钟前
vue3源码解析:依赖收集
前端·vue.js
WaiterL26 分钟前
一文读懂 MCP 与 Agent
前端·人工智能·cursor
gzzeason29 分钟前
使用Vite创建React初始化项目
前端·javascript·react.js
又双叒叕77830 分钟前
React19 新增Hooks:useOptimistic
前端·javascript·react.js
归于尽1 小时前
V8 引擎是如何给 JS"打扫房间"的 ?
前端·javascript
小old弟1 小时前
让对象保持定义的顺序来排列
前端
漫天星梦1 小时前
前端列表页大数据内存优化的思考
前端·面试