目录
一、依赖安装
二、效果展示
2.1、简单数组
2.2、多层数组
三、代码实现
四、前端分页
前言:
一般将表格数据导出为excel,后端可以实现,因为导出时一般需要导出所有数据,而前端一般只会拿到当前页的数据,有兴趣的可以了解一下前端导出excel的功能。
参考文章:vue项目中如何将数据导出到excel中_vue将数组导出为excel_cx&lavender的博客-CSDN博客
npm install js-export-excel 或者 yarn add js-export-excel
导出1
导出2
扩展一下前端用组件快速分页,可做了解。
首先拿到所有数据(drawerData),先展示(drawerList )第一页,进行截取
表格展示的 :data="drawerList"
this.drawerData = res.result.records;
this.drawerList = this.drawerData.slice(0, 10);
//========================视图============
//========================方法==============
handleCurrentChange2(pageIndex) {
var _this = this;
if (_this.drawerData) {
if (pageIndex) {
_this.pageNum = pageIndex;
}
_this.drawerList = _this.drawerData.slice(
(_this.pageNum - 1) * _this.pageSize,
_this.pageNum * _this.pageSize
);
}
},
handleSizeChange2(val) {
this.pageSize = val;
},
备注:pageNum: 1, // 当前页数 pageSize: 10, // 每页条数 total: 6,//总数