软件开发定制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>  <!--scope.row软件开发定制当前行的对象-->          <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

后端

@RestControllerpublic 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层、不再描述…