vue+element ui 表格选中特定行导出为excel

vue+element ui 表格选中特定行导出为excel

1：使用场景：

当选中表格中某几条数据（图中演示的为两行选中一行）进行导出为excel（如图二）

2：安装依赖：

npm install --save xlsx file-saver
npm install -D script-loader

3：引入依赖文件：

在src文件夹中创建名为excel的文件夹（注意大小写）
将Blob.js、export2Excel.js两个js文件复制到excel文件夹下
链接：https://pan.baidu.com/s/1P5qLlLrpcMxht_8RpUnZfw
提取码：2wdf

4：表格样式：

@selection-change="handleSelectionChange"为选中相应行时调用某个事件
:data="tableData"为表格的数据源

<el-table @selection-change="handleSelectionChange" :data="tableData">

5：在methods方法中写一个方法监控选择的行的情况：

handleSelectionChange (val) { // 操作多选
      this.multipleSelection = val; // 多选的行会存入multipleSelection数组中
    }

5：在methods方法中写入列表下载的相关功能函数

// 列表下载
    downloadExcel () {
      this.$confirm('确定下载列表文件?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.excelData = this.multipleSelection; // multipleSelection是一个数组，存储表格中选择的行的数据。
        this.export2Excel();
      }).catch(() => {

      });
    },
    // 数据写入excel
    export2Excel () {
      var that = this;
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/excel/export2Excel'); // 这里必须使用绝对路径，使用@/+存放export2Excel的路径
        const tHeader = ['表头名称1', '表头名称2', '表头名称3']; // 导出的表头名信息
        const filterVal = ['表头字段名1', '表头字段名2', '表头字段名3']; // 导出的表头字段名，需要导出表格字段名
        const list = that.excelData;
        const data = that.formatJson(filterVal, list);

        export_json_to_excel(tHeader, data, 'excel表格名字');// 导出的表格名称，根据需要自己命名
      });
    },
    // 格式转换，直接复制即可
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    }

5：在button中引入点击事件

<Button type="primary" @click="downloadExcel">导出</Button>

以上就可以了

参考资料：
https://blog.csdn.net/qq_26242601/article/details/91874261