Vue+element-ui实现表格数据渲染+分页
Vue+element-ui实现表格数据渲染+分页
具体属性请看官方文档:Table 表格
这里给大家看一个比较不错的表格数据渲染的例子,也是我目前所写的项目中的一部分。
这里呢我们就不给大家说顶栏和侧边栏
Aside
部分了,我们就只说表格数据是怎么渲染出来的,以及分页是如何实现的。
渲染表格
表格这块当然是<el-table>
,它有几个属性.
属性 | 说明 | 类型 |
---|---|---|
height | 固定列和表头 | string/number |
border | 是否带有纵向边框 | boolean |
max-height | Table 的最大高度。合法的值为数字或者单位为 px 的高度。 | string/number |
lazy | 是否懒加载子节点数据 | Boolean |
data | 显示的数据 | array |
你可以去element-ui中找一个合适的数据表格。
<el-tablev-if="tableData.length > 0"height="500px":data="tableData"style="width: 100%"><el-table-column prop="id" label="序号" width="100"> </el-table-column><el-table-column prop="date" label="创建时间" width="250"><template slot-scope="scope"><i class="el-icon-time"></i><span style="margin-left: 10px">{{ scope.row.date }}</span></template></el-table-column><el-table-column prop="type" label="收支类型" width="150"></el-table-column><el-table-column prop="crash" label="账户现金" width="170"><template slot-scope="scope"><i class="el-icon-s-finance"></i><span style="color: #4db3ff">{{ scope.row.crash }}¥</span></template></el-table-column><el-table-column label="操作" prop="operation"><template slot-scope="scope"><el-buttontype="primary"size="mini"plainicon="el-icon-edit"@click="handleEdit(scope.$index, scope.row)"v-if="user.identity == 'manager'">编辑</el-button><el-buttontype="danger"size="mini"icon="el-icon-delete"plain@click="handleDelete(scope.$index, scope.row)"v-if="user.identity == 'manager'">删除</el-button></template></el-table-column></el-table>
说明:
你要先绑定数据,比如这个表单中,
< el-table>
标签中,我绑定了tableData
数据,该数据用来保存后端传过来的表单数据。请务必注意
< el-table-column>
里的prop属性,要与tableData
中的属性字段一致,这样才可以成功渲染。你也可以在表格中使用
< template>
标签来添加你想要的任何小玩意(图标,按钮,输入框等)。
我们可以创建一个函数,让Vue在执行created
钩子函数时,调用此方法,将表格渲染出来。
- data中定义保存表格数据的
allTableData
allTableData: [],
- 钩子函数调用
created() {this.getProfile();
},
- 在methods里书写getProfile函数
getProfile() {this.$axios.get("xxx").then((res) => {this.allTableData = res.xxx;//设置分页数据,该方法下面会讲到this.setPaginations();}).catch((err) => {console.log(err);});
},
博主使用的是axios发起请求获取数据,博主之前写过一篇讲axios的文章,点击这里跳转。
分页
我们可以找一个分页Pagination
思想思路:先将表格数据放到一个变量中,之后再使用filter方法得到我们需要的数据后再放到要渲染的数据上,这样就完成了分页。
- data
tableData: [],
allTableData: [],
tableData用来存放需要渲染的数据,allTableDate用来存放所有数据(未过滤的数据)
这两个数据大家在看的时候要注意。
分页文档
在官网的例子中,找一个你喜欢的,我选的这款。
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
这款包含完整功能,分页,跳转什么的就都有了。
current-page
:当前页。
page-sizes
:每页显示多少条,这里是数组。
page-size
:一页显示多少数据
layout
:组件布局,子组件名用逗号分隔
size-change
:pageSize 改变时会触发,当改变每页条数时,会回调。
current-change
:当前页发送改变时会回调。
当然你也可以把这些数据写到data里,然后使用v-bind渲染到页面中:
- data中配置相关对象
paginations: {page_index: 1, //当前位于哪页total: 0, //数据总数page_size: 5, //一页显示多少条page_sizes: [5, 10, 15, 20], //每页显示多少条layout: "total, sizes, prev, pager, next, jumper", //翻页属性
},
- 使用v-bind绑定属性
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="paginations.page_index"
:page-sizes="paginations.page_sizes"
:page-size="paginations.page_size"
:layout="paginations.layout"
:total="paginations.total"
>
</el-pagination>
这里注意
handleSizeChange
和handleCurrentChange
,setPaginations
这是我们一会要定义的三个实现分页的重要方法。
setPaginations
用来实现初始化。
//设置分页属性
setPaginations() {//初始化this.paginations.total = this.allTableData.length;this.paginations.page_index = 1;this.paginations.page_size = 5;//设置默认的分页数据this.tableData = this.allTableData.filter((item, index) => {return index < this.paginations.page_size;});
},
这块实现了初始化,并设置了默认的分页数据
handleCurrentChange
当前页发生改变时的回调
//分页方法
handleCurrentChange(page) {//获取当前页let index = this.paginations.page_size * (page - 1);//获取数据总数let nums = this.paginations.page_size * page;//容器let tables = [];for (let i = index; i < nums; i++) {if (this.allTableData[i]) {tables.push(this.allTableData[i]);}this.tableData = tables;}
},
handleSizeChange
当显示条数发生改变时的回调
handleSizeChange(page_size) {this.paginations.page_index = 1;this.paginations.page_size = page_size;this.tableData = this.allTableData.filter((item, index) => {return index < page_size;});
},
这块的逻辑就不和大家细说了,如果想看示例的话,项目仓库链接
Vue+element-ui实现表格数据渲染+分页相关推荐
- vue表单中批量导入功能_vue实战(11)——vue+element UI实现表格数据导出Excel功能
一.应用场景 按照需求导出功能分为勾选批量导出及按照查询结果导出,考虑到接口操作导出的复杂性,因此实现了js控制导出的功能 导出功能截图 二.安装相关依赖 cnpm install --save xl ...
- vue + elment ui打印表格数据
vue + elment ui打印表格数据 主要的原理就是 在vue项目中 通过调用浏览器自带的打印功能,完成对table数据的打印 解决表格错位 以及elment ui 双重表头的问题 封装一下打印 ...
- element ui Table表格数据筛选功能实现
先来看看实现效果 element ui Table表格数据筛选功能实现 查看Element官网 关于筛选的实例. 在列中设置filters filter-method属性即可开启该列的筛选,filte ...
- vue element ui合并表格(合并某列的行数据)
需求:按需合并某些列的数据 自定义数据: tableData:[ { num:0, new_subject_name:"new_subject_name1", count1:&qu ...
- Vue + Element UI 中国省市区数据三级联动
安装数据 npm install element-china-area-data 页面引入 import { provinceAndCityData, regionData, provinceAndC ...
- 【前端】Vue+Element UI案例:通用后台管理系统-用户管理:Table表格增删查改、Pagination分页、搜索框
文章目录 目标 代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式 总 ...
- Vue Element UI 表格组件 利用插槽实现按下按钮后获得本行数据(内容)
Vue Element UI 表格组件 利用插槽实现按下按钮后获得本行数据(内容) 能够解决的问题 需要在表格中添加一个类似修改或编辑的按钮,按下按钮,弹出的窗口需要本行的渲染数据 需要向服务端提交一 ...
- 【vue】Element UI实现表格表头纵向显示
element实现表格表头纵向显示 我们正常使用Element UI写表格的时候,<el-table-column/> 标签里面都是纵向的.那么我们的需求有时候会要求行列转换,那么来看看咋 ...
- 【前端】Vue+Element UI案例:通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录 目标 代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题 总代码 本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
最新文章
- swift和OC - 拆分数组 和 拆分字符串
- JavaScript基础,Cookies,Sessions
- recyclerview item动画_RecyclerView 的 Item 酷炫动画,效果加案例讲解!
- 服务端程序的初步实现
- 1016 Phone Bills (25 分) 【未完成】【难度: 中 / 知识点: 模拟】
- vue开发黑科技--利用引用类型的值处理复杂数据的编辑
- Silverlight+WCF 新手实例 象棋 主界面-事件区-返回退出(三十三)
- ios开发跳转safari_阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页
- 【转】Magento 2数据库EAV模型结构
- SpringCloud学习笔记015---Spring Boot集成RabbitMQ发送接收JSON
- wpsoffice安卓历史版本_安装老版本的手机APP
- Create a virtualbox Based CentOS 6 OpenStack Cloud Image
- 自我鉴定200字大专生计算机专业,本科毕业自我鉴定200字(通用10篇)
- 初识主成分分析 (PCA)
- SitePoint播客#67:浏览器之舞
- 老域名及用户行为习惯.
- MATLAB之最优路径的查找
- logrotate 详解
- DIV+CSS布局心得
- 弹性公网IP(EIP)