vue+element-ui纯前端导出

首先在项目里注入依赖

 npm i js-export-excel

 其次就是分两种情况了，第一种就是只导出当前页的数据，在项目中写一个点击事件               

然后  

在el-table里加上一个ref,后面名字自己定，接着就是你的table表格数据的简单处理了 ，

 prop绑定的是你后端返回的字段名字，上面箭头指向的是我自己加了一个字段名字，因为数据需要编辑等一系列的操作这个prop="action"等会在导出的时候去掉，如果不加可能导出的表头就会多一个操作，并且内容是空的，没什么用所以自己做了小处理，接下来就是最重要的一步了，将这些东西写在你的点击事件里面

 上面的箭头指的是你要导出的文件名字，下面的这个箭头指向的数据源，这个是你在绑定el-table的时候用的：data="tableData",里面存的是你接口返回的数据。其他基本不用改变，附上代码

  // 导出按钮被点击

    onExportButtonClick() {

     

      const ExportJsonExcel = require("js-export-excel")

      const option = {}

      option.fileName = "订单发货列表"

      // table-columns 

      const tableColumns = this.$refs.elTable.columns

      // 过滤掉操作

      const _columns = tableColumns.filter(f => f.property != 'action')

      // 表头

      const _columnsSheetHeader = _columns.map( m => m.label)

      // 表头对应字段

      const _sheetFilter = _columns.map( m => m.property)

      option.datas = [

        {

          sheetData: this.tableData, //数据源

          sheetFilter: _sheetFilter, //表头过滤字段

          sheetHeader: _columnsSheetHeader, //表头

        },

      ]

      const toExcel = new ExportJsonExcel(option)

        toExcel.saveExcel() //保存

},

第二种情况就是点击导出按钮时要把全部的数据导出，即使分页了，因为这种是为了解决你点击了查找查出了200条数据，但是页面只展示了20条，你总不能导出10次吧，这个的话就要借助请求了，思路大概就是把刚才的那些放到你的请求里面，然后修改了数据源，下面看一下我在项目里是怎么处理的

 共标记了5处，第1处是请求的参数pageSize是条数，我们需要把页面的总条数给他赋值，我这里拿的this.total是我项目里接口返回的总条数，我自己存了一下，相信大家肯定也会用到这个数据，分页的时候是需要的，第2处是我对我的接口参数做了处理，为了就是不操作原参数，如果这里你直接用你请求数据的那个对象的话，当你点完导出后页面会出现问题，所以不要去操作原参数，自己定义一个对象只用来导出的时候用。第3处就是请求，根据个人项目写，第4处就是导出的文件名字，第5处很重要这是你接口返回的数据，也是你要导出的数据，依据个人接口返回赋值。附上代码：

  // 导出按钮被点击

    onExportButtonClick() {

      let _params ={

        currentPage : 1,

        pageSize:this.total

      }

      this.params.orderNumber && (_params.orderNumber = this.params.orderNumber)

      this.params.detailNumber && (_params.detailNumber = this.params.detailNumber)

      this.params.purchaserName && (_params.purchaserName = this.params.purchaserName)

      userApi.orderShipments(_params).then((res) =>{

      if(res.code === 200){

      const ExportJsonExcel = require("js-export-excel")

      const option = {}

      option.fileName = "订单发货列表"

      // table-columns 

      const tableColumns = this.$refs.elTable.columns

      // 过滤掉操作

      const _columns = tableColumns.filter(f => f.property != 'action')

      // 表头

      const _columnsSheetHeader = _columns.map( m => m.label)

      // 表头对应字段

      const _sheetFilter = _columns.map( m => m.property)

      option.datas = [

        {

          sheetData: res.result.list, //数据源

          sheetFilter: _sheetFilter, //表头过滤字段

          sheetHeader: _columnsSheetHeader, //表头

        },

      ]

      const toExcel = new ExportJsonExcel(option)

        toExcel.saveExcel() //保存

                }

            }

    },

加一张效果图：

提示：如果说你的表格里有插槽也是一样的给他写一个prop=“对应的字段名字”，还有表格里会出现下拉框的问题，后台给你的是1或者2，你需要导出“发货”：“未发货”这种情况，只需要在请求成功之后自己写个三目表达式处理一下即可。

文章纯属自己纪录一下，希望能有一点用，不喜勿喷！