三十九、vue中element最原始的分页（未封装的）

柔光的暖阳◎ 2021-12-24 05:49 169阅读 0赞

html
    <el-table ref="scoreUserTable" :data="scorePageUser.slice((currentPage1-1)*pageSize1,currentPage1*pageSize1)" tooltip-effect="light" size="mini" id="out_table3" 
    style="width: 100%" border></el-table>
    
    <div style="text-align: center;">
        <el-pagination v-show="show1" background @size-change="handleSizeChange1" @current-change="handleCurrentChange1" :current-page="currentPage1" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize1" layout="total, sizes, prev, pager, next, jumper" :total="scorePageUser.length">
        </el-pagination>
    </div>

data() {
    			return {
    				activityId:'',
    				scoreUserForm: {
    					name: '',
    				},
    				currentPage1: 1,
    				pageSize1: 10,
    				scorePageUser: [],
    			}
    		},
    		//分页隐藏显示。无数据隐藏
    		computed: {
    			show1: function() {
    				return this.scorePageUser.length == 0 ? false : true;
    			}
    		},
    methods: {
    this.getScoreData();
    				}
    
    getScoreData() {
    				var name = this.scoreUserForm.name;
    				this.getRequest("/publishActivity/getScoreInfo?id=" + this.activityId + "&name=" + name).then(resp => {
    					this.currentPage1 = 1;
    					this.scorePageUser = resp.data;
    				})
    			},

转载于:https://www.cnblogs.com/deng-jie/p/10761156.html

发表评论取消回复

表情：

评论列表（有 0 条评论，169人围观）

还没有评论，来说两句吧...

相关阅读

相关 php 实现分页功能（class封装了功能）

前言分页是一个很常见的功能，我这里提供了`分类类(class)`，用于前端页面中的四个按钮： 1. 首页 2. 下一页 3. 上一页 4. 尾页

布满荆棘的人生/ 2023年07月22日 11:23/ 0 赞/ 39 阅读

相关 vue中Element UI表格分页功能的实现

一、需求问题在vue的开发中，如果需要开发管理系统，那么`Element UI`就是一个不错的UI框架。在`Element UI`中的表格数据，如果数据量大的话，通过后端进

深碍√TFBOYSˉ_/ 2023年06月24日 15:26/ 0 赞/ 28 阅读

相关 vue+element封装的下拉tree---input+tree

项目里好多页面要用到下拉树的菜单： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0c

傷城~/ 2023年02月12日 08:22/ 0 赞/ 19 阅读

相关 Element-ui Vue 分页器，分页值更新后，UI未显示

原代码： <el-pagination background layout="prev, pager, next" :total=

超、凢脫俗/ 2022年11月29日 05:50/ 0 赞/ 340 阅读

相关 Vue中封装的echarts组件

先上效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L

系统管理员/ 2022年10月19日 04:08/ 0 赞/ 212 阅读

相关 ssm中封装的分页类

自己封装了分页类的内容，方便以后留着使用 package com.chen.util; import org.springframework.ste

刺骨的言语ヽ痛彻心扉/ 2022年06月18日 04:27/ 0 赞/ 193 阅读

相关封装的一个jq实现表格列分页的函数

目前大部分插件都能实现行分页(tr),但一直没找到能够实现列分页（td）的插件，无奈自己封装了一个用此函数的注意事项： 1，table必须要有class="column\

妖狐艹你老母/ 2022年05月28日 08:53/ 0 赞/ 201 阅读

相关未封装的扩展程序

查看插件,程序展示未封装的扩展程序(如下图) ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text

╰半夏微凉°/ 2022年03月20日 10:22/ 0 赞/ 460 阅读

相关 vue+element-表格的分页实现

今天简单的介绍一下element的分页是怎么实现的，先说一下感受，之前一直是使用的jQuery的分页，其实也不全算是，使用的本质还是BootStrapUI的分页，感兴趣的可以翻

约定不等于承诺〃/ 2022年03月17日 09:20/ 0 赞/ 520 阅读

相关三十九、vue中element最原始的分页（未封装的）

html <el-table ref="scoreUserTable" :data="scorePageUser.slice((currentPage1-1)p

柔光的暖阳◎/ 2021年12月24日 05:49/ 0 赞/ 170 阅读