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

博客zhu虎康2024-01-19 17:56

文章目录

- 需求
- 分析

需求

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

分析

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);
    },