在vue中关于element UI 中表格实现下载功能，表头添加按钮，和点击事件失效的解决办法。

因为在element 中表格是使用el-table的形式通过数据来支撑结构，所以，表格的样式没有自己写的灵活，所以有了没法添加按钮的烦恼。下面是解决的方法。

准备工作：

一.下载npm安装包两个

1.npm install --save xlsx file-saver

二.在要下载表格的页面引入依赖

1. import FileSaver from 'file-saver'

2. import XLSX from 'xlsx'

三.在页面中利用element 添加表格，并在表头中具体要添加按钮的地方引入

32     <el-table-column
33       :render-header="renderHeader"
34       width="200">
35     </el-table-column>
并且添加render-header 以便在后面的methods中添加按钮样式和结构的调整。

 1 <template>
 2 <div class="tableWrap" ref="tableWrap">
　　//单独的导出按钮，不放到表头总的做法。
 3   <!-- <el-button @click="exportExcel1()">下载</el-button> -->
 4   <el-table
 5     row-style="height:28px"
 6     id="out-table"  //这个类是要下载的表格信息
 7     :height="tableheights"
 8     ref="multipleTable"
 9     :data="tableData3"
10     tooltip-effect="dark"
11     style=" 100%;"
12     highlight-current-row="true"
13     @select="handleSelectionChange"
14     @select-all="handleSelectAll"
15     @cell-mouse-enter="cellMouseEnter"
16     @row-dblclick="dbclick"
17     cell-class-name="cellName"
18     :header-row-style="{backgroundColor:'#03a9f5',padding:0,fontSize:'12px',lineHeight:'27px',}"
19 
20   >
21     <!-- <el-table-column
22       type="selection"
23       width="60">
24     </el-table-column> -->
25     <el-table-column
26       :height:="30"
27       v-for="(col,index) in tableTitle.rolecols"
28       :label='col.label'  :width="tableWidth"
29       :prop="col.prop" :key="index" >
30     </el-table-column><!--获取索引-->
31 下面这条是插入的按钮占的坑，通过render-header插入模版
32     <el-table-column
33       :render-header="renderHeader"
34       width="200">
35     </el-table-column>
36   </el-table>
37 </div>
38 </template>

 1         // 导出功能
 2         exportExcel() {
 3           console.log(123)
 4          /* generate workbook object from table */
 5          var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
 6          /* get binary string as output */
 7          var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
 8          try {
 9              FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xls')
10          } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
11          return wbout
12         },
13     renderHeader() {
14          return (
15              <div>
　　　　　　　　　　　　//其中的这个oclick一定要用箭头函数来表示，不然会出现触发不了，可能在其他事件中被无数次触发的反人类现象。（我也很好奇）
16                 <el-button type='primary' size='small' on-click={()=>this.exportExcel()}>导出表格</el-button>
17              </div>
18          )
19     }

补充：导出按钮可以放到其他一个单独的地方，也可以实现导出效果，要放到表头中，就必须要使用onclick并且要用箭头函数，重点强调！！！