vue-element实现前端分页及注意事项

最新推荐文章于 2025-04-29 16:52:43 发布

Kätzchen-408

最新推荐文章于 2025-04-29 16:52:43 发布

阅读量638

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_45842078/article/details/119651460

版权

前端专栏收录该内容

35 篇文章

订阅专栏

本文详细讲解了如何在Element UI中使用分页组件与表格配合，确保数据分段展示。重点在于理解分页组件与表格数据的独立性，以及如何通过数据处理动态加载和更新显示内容。

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

element实现前端分页

- 注意事项:分页table并不是本来就绑定的,需要对数据进行处理
- 实现:

注意事项:分页table并不是本来就绑定的,需要对数据进行处理

element的分页组件和表格组件并不是绑定的,所以如果前端分页的话,分页组件只能控制点击时显示哪部分数据,因此table也只能绑定显示的数据而不是所有数据.

实现:

html:

 <el-table
            :header-cell-style="{background:'#DFECF0',color:'#000'}"
            :cell-style="cellStyle"
            size="small"
            :data="dataShow"
            style="width: 100%">
            <!--若干el-table-column...-->
            <!--注意绑定的是dataShow就可以了-->
</el-table>


<el-pagination
            :page-size="pageSize"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            layout="prev, pager, next"
            :total="totalAPI">
        </el-pagination>

js:

export default{
data(){
return{
 // 分页数据
      totalPageData: [],
      pageSize: 5,
      pageNum: 1,
      currentPage: 1,
      totalAPI: 1,
	  tableData: [],
      dataShow: [],}
}
method:{
 handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.dataShow = this.totalPageData[currentPage - 1]
      // console.log(this.currentPage)  //点击第几页
    },
 calcPageData() {
      if (this.tableData.length > 1) {
        this.pageNum = Math.ceil(this.totalAPI / this.pageSize) || 1
      }
      for (let i = 0; i < this.pageNum; i++) {
        this.totalPageData[i] = this.tableData.slice(this.pageSize * i, this.pageSize * (i + 1))

      }
      this.dataShow = this.totalPageData[this.currentPage - 1]
    },
  getAPITokenList() {
      this.tableData.length = 0
      let _this = this
      http.get('/proxyName',
          _this.GLOBAL.User + '/token_list/',
          {},
          {"Authorization": "Bearer " + sessionStorage.getItem('tk')})
          .then(res => {
            if (res.code === 200) {
              let length = res.data.length
              _this.totalAPI = length
              for (let i = 0; i < length; i++) {
                var Data = {}
                Data.tokenID = res.data[i].token_id
                Data.tokenLabel = res.data[i].label
                Data.date = res.data[i].create_time
                Data.overTime = res.data[i].overtime
                Data.whiteList = (res.data[i].ip_white).toString()
                _this.tableData.push(Data)
              }
              this.calcPageData()
            } else {
              this.$message({
                type: 'error',
                message: _this.$t('customerCenter.fail_get_tokenList')
              });
            }
            console.log(res)

          })
    },}
}