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);
    },
相关推荐
teeeeeeemo几秒前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
贵沫末19 分钟前
React——基础
前端·react.js·前端框架
aklry30 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin9338 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子38 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户38022585982439 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug41 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo41 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
撰卢1 小时前
如何提高网站加载速度速度
前端·javascript·css·html
10年前端老司机1 小时前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js