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

文章目录

• • 需求
  • 分析

需求

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

分析

• html

<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

// 表格数据
tableDatas: [],
tableData: [],

pagination: {
  total: 0,
  currentPage: 1,
  pageSize: 10
},
loading: false

• methods

接口调用(){
	this.loading = false
	const key1 = this.tabList[0].name
	this.tableDatas = res.data[key1]
	this.pagination.total = this.tableDatas.length
	this.handleCurrentChange(1)
}

)

// 页数切换
    handleCurrentChange (e) {
      this.pagination.currentPage = e
      const start = (this.pagination.currentPage - 1) * 10;
      const end = start + 10;
      this.tableData = this.tableDatas.slice(start, end);
    },