Element ui实现分页

曾经终败给现在 2022-10-06 13:58 220阅读 0赞

vue 代码

<template>
      <div class="content">
        <div class="table">
          <el-table :data="category_data" style="width: 100%">
            <el-table-column prop="id" label="编号" width="180"></el-table-column>
            <el-table-column prop="name" label="账户" width="180"></el-table-column>
            <el-table-column prop="modul" label="模块" width="180"></el-table-column>
            <el-table-column prop="type" label="类型" width="180"></el-table-column>
            <el-table-column prop="detail" label="详细介绍" width="180"></el-table-column>
            <el-table-column prop="date" label="操作时间" width="180" >
              <template slot-scope="scope">
                  { { rTime(scope.row.date)}}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button size="mini" type="danger" @click="delete_data(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              :current-page="1"
              :page-size="5"
              style="padding:30px 0;text-align:center;"
              layout="total, prev, pager, next, jumper"
              @current-change="get_allLog_data_all"
            ></el-pagination>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    import {  logfindAll, departmentSelectAll, departmentDelete, logDeleteById, logPage } from '@/api/requests/base'
    import {  log } from 'util'
    import {  rTime } from '@/utils/time'
    export default { 
      name: 'department-manage',
      data () { 
        return { 
          rTime,
          category_data: [],//分页总数据
          category_page_num: 1,
          size: 5
        }
      },
      created () { 
        this.get_allLog_data_all()
      },
      methods: { 
    
        get_allLog_data_all (num) { 
          this.category_page_num = num || 1
          console.log(this.category_page_num);
    
          logPage(this.category_page_num, 5).then(res => { 
            this.category_data = res.data
          })
        },
    
        delete_data (category_data) { 
    
    
          this.$confirm('确定要删除这个部门吗, 是否继续?', '提示', { 
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => { 
    
            logDeleteById(category_data).then(res => { 
    
              this.$notify({ 
                title: '成功',
                message: '操作成功',
                type: 'success'
              });
              this.get_allLog_data_all()
            })
          }).catch(() => { 
            this.$message({ 
              type: 'info',
              message: '已取消删除'
            });
          });
        }
      },
    }
    </script>
    
    
    <style lang="scss" scoped>
    .content { 
      padding: 40px;
      .el-table { 
        height: 50vh;
      }
      .el-dialog { 
        overflow: auto;
      }
      .el-table { 
        margin-top: 30px;
      }
    }
    </style>

//日志模块分页1  
export const logPage = (current: number, size: number) => \{  
return api.get(`/api/log/findAllPage/${current}/${size}`)  
\}  
后端

@GetMapping("/findAllPage/{current}/{size}")
        public Result findPage(@PathVariable Integer current, @PathVariable Integer size){ 
            List<Aclog> aclogs = aclogService.selectPage(current, size);
            if(aclogs.size()>0){ 
                return Result.success("分页查询成功",aclogs);
            }else{ 
                return Result.fail("分页查询失败");
            }
        }