[Vue+Element UI]不知道总页码数时如何实现翻页

<el-table></el-table>的下面加上分页控件,注意,是下面,或者叫外面,不是里面

1
2
3
4
5
6
7
8
9
<el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="sizes, prev, pager, next, jumper"
            :total="totalDataSize">
        </el-pagination>

<script><script>里面加入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
data() {
            return {
                input: "", // 搜索输入框数据
                jobDefinitionList: [], // 存放列表数据
                selectedRows: [],  //存放勾选的列表数据
                jobDefinitionParameters: "",
                automationType: "",
                show: false,
                sortBy:"job_definition_name", //排序关键字
                sortOrder:"ASC"//排序,升序还是降序
                currentPage:1, //初始页
                previousPage:0, //上一次的页面
                pageSize:10,    //每页的数据
                totalDataSize:10,    //总数据条数
                estimateAddDataSize:10,    //为了预估数据总数,猜测增加数据条数
                loading: true
            };
        },

获取数据的函数:

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
methods: {
            listAllJobDefinition() {
                // 由于已经导入了 Vue-resource这个包,所以 ,可以直接通过  this.$http 来发起数据请求
                this.$http
                .get("jobDefinitions",{
                    params: {
                        sortBy: this.sortBy,
                        sortOrder: this.sortOrder,
                        pageSize: this.pageSize,
                        pageNo: this.currentPage,
                        jobDefinitionName: this.input
                    }
                })
                .then(result => {
                    // 注意: 通过 $http 获取到的数据,都在 result.body 中放着
                    var result = result.body;
                    // console.log("Code : "+result.code);
                    if (result.code === 0) {
                        // 成功了
                        this.loading = false;
                        this.jobDefinitionList = result.data;
                         
                        //为了分页功能,预估总数据条数
                        //如果当前页的数据不满每页最大数据条数,就表示不能再继续翻页了
                        if(this.jobDefinitionList.length < this.pageSize){
                            this.estimateAddDataSize = 0;
                        }
                        //如果当前页的数据大于或者等于最大数据条数,且当前页的页码比上一页大,表示还可以继续翻页
                        if(this.jobDefinitionList.length >= this.pageSize && this.currentPage > this.previousPage){
                            this.totalDataSize += this.estimateAddDataSize;
                        }
                        this.previousPage = this.currentPage;
                         
                        for (var i in this.jobDefinitionList) {
                            this.automationType = this.jobDefinitionList[i]["automationType"];
                            this.automationType = DataMapping.automationType[this.automationType];
                            this.jobDefinitionList[i]["automationType"] = this.automationType;
                             
                            this.jobDefinitionParameters = JSON.stringify(this.jobDefinitionList[i]["jobDefinitionParameters"]);
                            this.jobDefinitionList[i]["jobDefinitionParameters"] = this.jobDefinitionParameters;
                        }
                    } else {
                        // 失败了
                        this.$message({
                            message: result.message,
                            type: 'warning'
                        })
                    }
                }).catch((e) => {console.log(e)});
            },

  添加翻页事件的处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 初始页currentPage、初始每页数据数pageSize和数据data
            handleSizeChange: function (size) {
                this.pageSize = size;
                this.currentPage = 1;
                this.totalDataSize = 2*(this.pageSize);
                this.estimateAddDataSize = this.pageSize;
                this.listAllJobDefinition();
                // console.log(this.pageSize)  //每页下拉显示数据
            },
            handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                this.listAllJobDefinition();
                // console.log(this.currentPage)  //点击第几页
            }

  

posted on   张缤分  阅读(1331)  评论(0编辑  收藏  举报

编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 25岁的心里话
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
历史上的今天:
2019-04-16 [Jenkins Git] 在Jenkins上拉代码总是失败,跑去本地看,提示输入用户名和密码,但是Jenkins上已经配置了正确的用户名和密码
2014-04-16 [Selenium]验证点了某个Button之后无反应

导航

< 2025年3月 >
23 24 25 26 27 28 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 1 2 3 4 5

统计

点击右上角即可分享
微信分享提示