导出表格

步骤一：安装依赖

npm install --save xlsx file-saver(安装xlsx、file-saver这两个依赖)

步骤二：新建一个js文件实现文件导出

import FileSaver from "file-saver";
import * as XLSX from "xlsx";

const  htmlToExcel = {
    getExcel(title){
        var excelTitle = name;
        var wb = XLSX.utils.table_to_book(document.querySelector(tabelName));
        //tableName为表格的id如'#selectTable'
        /* 获取二进制字符串作为输出 */
        var wbout = XLSX.write(wb, {bookType: "xlsx",bookSST: true,type: "array"});
        try {
            FileSaver.saveAs(
                new Blob([wbout], { type: "application/octet-stream" }),
                excelTitle + ".xlsx"
            );
        } catch (e) {
            if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
    }
};

export default  htmlToExcel;

步骤三：在需要导入的界面添加如下代码

/*导出按钮*/
<el-button type="primary" style="margin:20px;" @click="exportExcelSelect">导出Excel</el-button>

/*1.原表格,添加多选框，并添加监听多选框变化的函数*/
<el-table :data="tableData" @selection-change="handleSelectionChange"  >
<el-table-column type="selection" >
</el-table-column>
...
</el-table>

/*2.表格预览弹窗*/
<el-dialog title="表格保存预览" width="70%" :visible.sync="selectWindow"> 
<el-table :data="selectData" id="selectTable" height="380px">
<el-table-column prop="date" label="日期" > 
</el-table-column> 
...
<el-table-column prop="name" label="姓名" >
</el-table-column>
</el-table>
</el-dialog>
/*3.引入js文件*/
import htmlToExcel from '@/utils/htmlToExcel'
/*4.变量声明*/
selectData:[] //选中的数据
selectWindow:false // 弹窗显示
/*5.方法调用*/
//导出
exportExcel() {
htmlToExcel.getExcel('导出的自定义标题','#selectTable',) //这里一定要填预览表格的id
this.selectWindow = false //关闭窗口
this.$message.success("导出成功")
this.getList()//列表刷新
}, 
//显示预览弹窗
exportExcelSelect(){
if (this.selectData.length < 1){
this.$message.error('请选择要导出的内容！');
return false; 
} 
this.selectWindow = true; 
},
//选中数据
handleSelectionChange(val) {
this.selectData = val; 
}

到这里就可以实现表格的导出了

多选的跨页问题

有时候一页不能显示表格的所有数据，但点击跳转下一页，页面就会重新渲染导致之前选中的行数丢失，可以尝试下面的方式

步骤一：为table添加如下属性

  <el-table
       @selection-change="handleSelectionChange"
       :row-key="getRowKeys"
      >

步骤二：为selection添加如下属性

   <el-table-column
    type="selection"
    :reserve-selection="isShowSelect"
    :selectable="selectable"
    >

    </el-table-column>

步骤三：添加如下方法

  getRowKeys(row) {
     return row.id;//指定row-key的一个标识
  },
  selectable(row, index) {
     return !row.check;
  },
  clearSelect () {
      this.$refs.Table.clearSelection()//清除多选框，在操作成功后调用
    }

到此就实现了跨页问题。

注意： 1、如果出现了中断操作，比如前面的表格预览，突然关闭了对话框，此时并不会清空多选框，为了实现情况，可以利用close的回调函数进行清空。

  <el-dialog title="表格保存预览" width="70%" :visible.sync="selectWindow"  @close="clearSelect">