前端Vue实现表格数据导出为Excel

目录

一、依赖安装

二、效果展示

2.1、简单数组

2.2、多层数组

三、代码实现

四、前端分页

前言：

  一般将表格数据导出为excel，后端可以实现，因为导出时一般需要导出所有数据，而前端一般只会拿到当前页的数据，有兴趣的可以了解一下前端导出excel的功能。

  参考文章：vue项目中如何将数据导出到excel中_vue将数组导出为excel_cx&lavender的博客-CSDN博客

一、依赖安装

npm install js-export-excel  或者   yarn add js-export-excel

二、效果展示

2.1、简单数组

2.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,//总数