ElementUI实现表格分页功能
时间:2022-07-24
本文章向大家介绍ElementUI实现表格分页功能,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格数据分页</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="vue">
<el-table :data="table_list.slice((currentPage-1)*pagesize,currentPage*pagesize)"
:default-sort="{prop: 'date', order: 'descending'}" height="450" border style="width: 100%" stripe
highlight-current-row>
<el-table-column label="序号">
<template slot-scope="scope">
{{scope.$index+1}}
</template>
</el-table-column>
<el-table-column prop="date" label="工号">
</el-table-column>
<el-table-column prop="name" label="姓名">
</el-table-column>
<el-table-column prop="address" label="职位">
</el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<el-button type="text" size="small">移除
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
:page-sizes="[10, 20, 50, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
:total="table_list.length">
</el-pagination>
</div>
</body>
<script src="http://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/element-ui/2.12/lib/theme-chalk/index.js"></script>
<script>
new Vue({
el: '#vue',
data: {
table_list: [{
date: '20160503',
name: '王小虎',
address: '销售'
}, {
date: '20160502',
name: '王小虎',
address: '销售'
}, {
date: '20160504',
name: '王小虎',
address: '销售'
}, {
date: '20160501',
name: '王小虎',
address: '销售'
}, {
date: '20160508',
name: '王小虎',
address: '销售'
}, {
date: '20160506',
name: '王小虎',
address: '销售'
}, {
date: '20160507',
name: '王小虎',
address: '销售'
}],
currentPage: 1,
pagesize: 10,
},
methods: {
handleSizeChange: function (size) {
this.pagesize = size;
},
handleCurrentChange: function (currentPage) {
this.currentPage = currentPage;
}
}
})
</script>
</html>
- Java开发Spring第一天
- 关于R安装中文分词包安装不上的问题install.packages("tm")
- dataguard备库的数据文件的迁移实战(r8笔记第24天)
- Hive的left join、left outer join和left semi join三者的区别
- 52. Socket Server 自定义协议的简单实现 | 厚土Go学习笔记
- dataguard备库的数据文件的迁移(r8笔记第22天)
- 46. 实现一个简单的网络爬虫 | 厚土Go学习笔记
- 45. sync.Mutex 互斥和互斥锁 | 厚土Go学习笔记
- golang进度条
- 44. goroutine、channel、time的例子 | 厚土Go学习笔记
- AVL二叉树
- Golang:使用 httprouter 构建 API 服务器
- dataguard中需要注意的一些数据文件操作(r8笔记第21天)
- 42. select 的默认分支 | 厚土Go学习笔记
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法