ElementUI分页功能

效果图

前端：

<template>
  <div>
    <h2>用户列表h2>
    <el-table style="width: 100%" stripe border highlight-current-row :data="userList" >
      <el-table-column align="center" prop="id"   label="员工编号" >el-table-column>
      <el-table-column align="center" prop="name" label="员工姓名">el-table-column>
      <el-table-column align="center" prop="sex"  label="员工性别">el-table-column>
      <el-table-column align="center" prop="age"  label="员工年龄">el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑el-button>  
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除el-button>
        template>
      el-table-column>
    el-table>
    <div class="block">
      <el-pagination
        hide-on-single-page   当数据只有一页时,自动隐藏分页菜单
        @size-change="handleSizeChange"        当每页显示的数据数目发生改变生的动作,需要按新的pageSize查询数据
        @current-change="handleCurrentChange"  当改变当前页时产生的动作
        :current-page="pageNo"                 绑定当前页
        :page-sizes="[5, 10, 30, 50]"          显示pageSize的选项
        :page-size="pageSize"				  绑定当前页数
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount">				  绑定当前总数
      el-pagination>
    div>
  div>
template>

<script>
export default {
  name: "userList",
  data(){
    return{
      userList:[],
      pageNo:1,      // 默认当前是第一页
      pageSize:5,    // 当前每页的数据是5条
      totalCount:0   // 总数默认为0
    }
  },
  mounted() {        // 页面加载之前执行的函数
    this.getCount();  // 获取当前数据的总数
    this.getList();   // 按当前的页号和每页的数据量进行查询
  },
  methods:{
    getCount(){       
      this.axios.post("/getCount").then(res=>{
        this.totalCount = res.data;
      })
    },
    getList(){
      let params = new FormData();
      params.append("pageNo",this.pageNo);
      params.append("pageSize",this.pageSize);
      this.axios.post("/getUserList",params).then(res=>{
        this.userList = res.data;
      })
    },
    handleEdit(row){    // 对该行数据进行更新
      this.$router.push({
        name:'update',
        params:{user:row}
      })
    },
    handleDelete(row){ // 对改行数据进行删除
      let params = new FormData();
      params.append("id",row.id);
      this.axios.post("/delete",params).then(res=>{
        if(res.data=="ok"){
          this.$notify.success({"title":"删除结果","message":"成功"});
          this.getCount();
          this.getList();
        }else {
          this.$notify.error({"title":"删除结果","message":"失败"});
        }
      })
    },
    handleSizeChange(val) { // 修改每页所存数据量的值所触发的函数
      this.pageSize = val;  // 修改页的大小
      this.getList();       // 按新的pageNo和pageSize进行查询
    },
    handleCurrentChange(val) { // 修改当前页所触发的函数
      this.pageNo = val;       // 更新当前的页
      this.getList();          // 按新的pageNo和pageSize进行查询
    }
  }
}
script>

<style scoped>

style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

后端

@RestController
public class TestController {
    @Autowired
    UserServiceImpl userService;
    
    @RequestMapping("/getCount")
    public String getCount(){
        return Integer.toString(userService.getCount());
    }
    @RequestMapping("/getUserList")
    public List<User> getUserList(String pageNo,String pageSize){
        return userService.getUserList(Integer.parseInt(pageNo),Integer.parseInt(pageSize));
    }
    
    @RequestMapping("/getUserByID")
    public User getUserByID(String id){
        return userService.getUserByID(Integer.parseInt(id));
    }
    
    
    @RequestMapping("/delete")
    public String delete(String id){
        int result = userService.delete(Integer.parseInt(id));
        return result>0?"ok":"no";
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

dao层、service层不再描述…