三十九、vue中element最原始的分页(未封装的)
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;
})
},
三十九、vue中element最原始的分页(未封装的)的更多相关文章
- Java进阶(三十九)Java集合类的排序,查找,替换操作
Java进阶(三十九)Java集合类的排序,查找,替换操作 前言 在Java方向校招过程中,经常会遇到将输入转换为数组的情况,而我们通常使用ArrayList来表示动态数组.获取到ArrayList对 ...
- NeHe OpenGL教程 第三十九课:物理模拟
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- Gradle 1.12用户指南翻译——第三十九章. IDEA 插件
本文由CSDN博客万一博主翻译,其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Githu ...
- SQL注入之Sqli-labs系列第三十八关、第三十九关,第四十关(堆叠注入)
0x1 堆叠注入讲解 (1)前言 国内有的称为堆查询注入,也有称之为堆叠注入.个人认为称之为堆叠注入更为准确.堆叠注入为攻击者提供了很多的攻击手段,通过添加一个新 的查询或者终止查询,可以达到修改数据 ...
- WPF,Silverlight与XAML读书笔记第三十九 - 可视化效果之3D图形
原文:WPF,Silverlight与XAML读书笔记第三十九 - 可视化效果之3D图形 说明:本系列基本上是<WPF揭秘>的读书笔记.在结构安排与文章内容上参照<WPF揭秘> ...
- 微信小程序把玩(三十九)navigation API
原文:微信小程序把玩(三十九)navigation API 演示效果也看到了小程序也就提供这几个处理导航控制.值得注意的是只能同时导航五个页面 主要属性: 导航条一些方法 wx.setNavigati ...
- 《手把手教你》系列技巧篇(三十九)-java+ selenium自动化测试-JavaScript的调用执行-上篇(详解教程)
1.简介 在做web自动化时,有些情况selenium的api无法完成,需要通过第三方手段比如js来完成实现,比如去改变某些元素对象的属性或者进行一些特殊的操作,本文将来讲解怎样来调用JavaScri ...
- 第三百三十九节,Python分布式爬虫打造搜索引擎Scrapy精讲—Scrapy启动文件的配置—xpath表达式
第三百三十九节,Python分布式爬虫打造搜索引擎Scrapy精讲—Scrapy启动文件的配置—xpath表达式 我们自定义一个main.py来作为启动文件 main.py #!/usr/bin/en ...
- centos shell编程5 LANMP一键安装脚本 lamp sed lnmp 变量和字符串比较不能用-eq cat > /usr/local/apache2/htdocs/index.php <<EOF重定向 shell的变量和函数命名不能有横杠 平台可以用arch命令,获取是i686还是x86_64 curl 下载 第三十九节课
centos shell编程5 LANMP一键安装脚本 lamp sed lnmp 变量和字符串比较不能用-eq cat > /usr/local/apache2/htdocs/ind ...
随机推荐
- jquery ajax跨域请求后台的简单例子
一.简介AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. ajax() 方法通过 HTTP 请求加载远程数据. 该方法是 jQuery 底层 AJAX 实现.简 ...
- Java数据结构和算法 - 递归
三角数字 Q: 什么是三角数字? A: 据说一群在毕达哥拉斯领导下工作的古希腊的数学家,发现了在数学序列1,3,6,10,15,21,……中有一种奇特的联系.这个数列中的第N项是由第N-1项加N得到的 ...
- 从一道面试题探究 Integer 的实现
记得有次面试,面试官问我: 如何写一个方法交换两个 Integer 类型的值? 当时心里一惊,这是把我当小白了呀!交换两个数的值还不容易么,最简单的直接搞一个中间变量,然后就可以交换了… … 面试官随 ...
- Kafka面试题
1.如何获取topic主题的列表bin/kafka-topics.sh --list --zookeeper localhost:2181 2.生产者和消费者的命令行是什么?生产者在主题上发布消息:b ...
- .NET Core微服务之基于IdentityServer建立授权与验证服务(续)
Tip: 此篇已加入.NET Core微服务基础系列文章索引 上一篇我们基于IdentityServer4建立了一个AuthorizationServer,并且继承了QuickStartUI,能够成功 ...
- DotNetCore跨平台~dotnet pack打包详细介绍
回到目录 dotnet pack 命令生成项目并创建 NuGet 包.这个操作的结果是两个 nupkg 扩展名的包.一个包含代码,另一个包含调试符号. 该项目被依赖的 NuGet 包装被添加到 nus ...
- 【面试】足够应付面试的Spring事务源码阅读梳理(建议珍藏)
Starting from a joke 问:把大象放冰箱里,分几步? 答:三步啊,第一.把冰箱门打开,第二.把大象放进去,第三.把冰箱门带上. 问:实现Spring事务,分几步? 答:三步啊,第一. ...
- Webpack 4教程 - 第四部分,使用SplitChunksPlugin分离代码
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://wanago.io/2018/06/04/code-splitting-with-s ...
- SpringCloud系列——Config 配置中心
前言 Spring Cloud Config为分布式系统中的外部化配置提供了服务器端和客户端支持.有了配置服务器,您就有了一个中心位置来管理跨所有环境的应用程序的外部属性.本文记录实现一个配置中心.客 ...
- Jinja2用法总结
Jinja2用法总结 一:渲染模版 要渲染一个模板,通过render_template方法即可. @app.route('/about/') def about(): # return rende ...