VUE element-ui之table表格分页完整功能

迷南。 2023-01-23 09:51 164阅读 0赞

## 步骤： ##

***表格底部导入分页组件：***

<el-pagination
              :current-page.sync="currentPage"
              :page-size="pageSize"
              :page-sizes="[100, 200, 300, 400]"
              background
              layout="prev, pager, next, total, jumper"
              :total="totalData"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
            />

***定义组件内变量：***

data() { 
        return { 
          tableData: [],
          totalData: null,//总条数
          currentPage: 1,//当前页码
          pageSize: 50,//每页条数
        }
      },

***methods中定义方法：***

handleCurrentChange(val) {  //分页
          this.params.page = val - 1//这里注意：后端页码从0开始所以用当前页码-1，否则前端页码会多一页
          frequencyTen({  ...this.params }).then(res => { 
            this.tableData = res.frequency.content
            this.totalData = res.frequency.totalElements
          })
        }

***效果如图：***  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhblhpYW9YaV95ZWFs_size_16_color_FFFFFF_t_70_pic_center]

// 可选择页条数
        handleSizeChange(val) { 
          this.params.size = val
          driverScoreTab(this.params).then(res => { 
            this.totalData = res.totalElements
            this.tableData = res.content
          })
        },

***效果图：***  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhblhpYW9YaV95ZWFs_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhblhpYW9YaV95ZWFs_size_16_color_FFFFFF_t_70_pic_center]: /images/20221004/194679e309e84400846b80979361c087.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhblhpYW9YaV95ZWFs_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221004/d9d977f1270349d0a838a590bda1c72a.png