如何将elementUI 表格(el-table)和分页器(el-pagination)连接起来
el-table
表格的代码:
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
}
}
</script>
上面的代码时elementUI官方示例,简单分析一下:el-table 里面的 :data
是数据源;el-table-column 是表格里面的每一行的数据,它里面的 prop
绑定的是 :data
数据源里面的某个属性值,由此形成一个表格。
el-pagination
的代码:
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[2, 5, 8, 10]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
<script>
export default {
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
},
data() {
return {
currentPage: 1,
pageSize: 5
};
}
}
</script>
上面是elementUI关于分页器的最全功能的代码示例,简单分析如下:size-change
事件在当前页面数据条数变化时触发;current-change
事件在当前页面跳转到其它页时触发;current-page
是当前所在的页码;page-sizes
是可选的页面数据条数;page-size
是默认显示的数据条数;layout
是控制分页器的布局,里面的内容是固定的,但是可以调换位置;total
是页面总数据条数。
那么如何将table和pagination连接起来呢?
其实很简单,在实现上面代码的前提下,将el-table 表格中绑定的 data 数据源做如下修改即可:
:data="tableData.slice((currentPage - 1) * pageSize, currentPage*pageSize)"
这段代码什么意思呢?这就又涉及到基础知识了--数组的方法,更多关于js内置对象及其方法可以参考这篇文章
首先是数组的 .slice
方法,用来截取数组,它接受收两个参数,第一个是开始的索引值,第二个是结束的索引值。截取的数组的值放在一个新的数组中,但是不包含结束的索引对应的元素值。
所以,当前页为第一页时 data 数据源为 从第0条到第 pageSize 条,而当currentPage或者pageSize发生改变时,data数据源也会跟着变化,因此就实现了分页器与表格的连接。
参考文章: https://blog.csdn.net/weixin_44093954/article/details/87879012
如何将elementUI 表格(el-table)和分页器(el-pagination)连接起来的更多相关文章
- 基于element-ui封装一个Table模板组件
大家在做后台管理系统的时候,写的最多的可能就是表格页面了,一般分三部分:搜索功能区.表格内容区和分页器区.一般这些功能都是使用第三方组件库实现,比如说element-ui,或者vuetify.这两个组 ...
- element-ui 中的table的列隐藏问题
element-ui 中的table和bootstrap中的table的某些设置还是有一定的差别的.之前用bootstrap做的表格,想要实现简短列和详细列的切换.因为详细列实在有太多列了,拉动滚动条 ...
- vue element-ui表格里时间戳转换成时间显示
工作中遇到后台给的表格数据里时间是一个13位的时间戳,需要转换成时间显示在表格里, 可以用element-ui表格自带的:formatter函数,来格式化表格内容: // 时间戳转换成时间 // 使用 ...
- 结合element-ui表格自动生成sku规格列表
最近在写一个根据输入的规格,属性值动态生成sku表格,实现的效果大致如图,这是在vue项目里,结合element-UI表格写的,写好了就整理了一下,把代码贴上来,方便以后使用,不过代码里还是有一些重复 ...
- 透明、圆角、阴影效果、背景色渐变、<a></a>去外层虚线、!!!表格标签<table>
表格标签 <table> 代表表格 width:指表格的宽度 一种是像素 (浏览器缩小的时候出现滚动条) 一种是百分比(跟着浏览器的大小而大小) b ...
- 网页上的表格数据table
格式: <table> <tr> <th> </th> </tr> <tr> <td> </td> &l ...
- 一天搞定CSS:表格(table)--19
1.表格标签 表格标签的嵌套关系 <table> <!--表格头--> <thead> <!--表格行--> <tr> <!--表格列 ...
- Android表格布局(Table Layout)
Android表格布局(Table Layout) 先来看布局管理器之间继承关系图: 图1 可知TableLayout继承了LinearLayout,所以表格布局本质上依然是线性管理器. 表格布局采用 ...
- elementUI表格排序问题
elementUI表格排序: 问题:得不到排序后的数组,每次打印的总是一开始的数据 <el-table ref="passTable" :data="passTab ...
随机推荐
- 我们是如何做go语言系统测试覆盖率收集的?
工程效能领域,测试覆盖率度量总是绕不开的话题,我们也不例外.在七牛云,我们主要使用go语言构建云服务,在考虑系统测试覆盖率时,最早也是通过围绕原生go test -c -cover的能力来构建.这个方 ...
- git常用代码合集
git常用代码合集 1. Git init:初始化一个仓库 2. Git add 文件名称:添加文件到Git暂存区 3. Git commit -m “message”:将Git暂存区的代码提交到Gi ...
- [ APUE ] 第三章 文件系统
1. 文件描述符 打开或创建一个文件时,内核向进程返回一个文件描述符,当读.写一个文件时,用open()或creat()返回的文件描述符标识该文件,将其作为参数传递给write.read. stdin ...
- skywalking 5.X 分布式链路跟踪 使用笔记
skywalking 特点 性能好,针对单实例5000tps的应用,在全量采集的情况下,只增加 10% 的CPU开销.详细评测见<skywalking agent performance tes ...
- mysql性能优化总结(MySql避免重复插入记录的几种方法)
如果我们创建了(area, age,salary)的复合索引,那么其实相当于创建了:(area,age,salary),(area,age).(area)三个索引,这被称为最佳左前缀特性.因此我们在创 ...
- Plugns
Lombok Translation Rainbow Brackets
- [CF1216E] Numerical Sequence hard version
题目 The only difference between the easy and the hard versions is the maximum value of k. You are giv ...
- redis 链接数满了
服务器上可以设置timeout参数,这样可以将限制的连接自动释放掉.
- MySQL 查询 存储过程 视图 触发器 函数 索引 建表语句 数据库版本 当前登录用户 当前数据库名称
MySQL 查询 存储过程 视图 触发器 函数 索引 建表语句 数据库版本 当前登录用户 当前数据库名称 INFORMATION_SCHEMA.TABLES INFORMATION_SCHEMA. ...
- Java基础笔记05-06-07-08
五.今日内容介绍 1.方法基础知识 2.方法高级内容 3.方法案例 01方法的概述 * A: 为什么要有方法 * 提高代码的复用性 * B: 什么是方法 * 完成特定功能的代码块. 02方法的定义格式 ...