在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中添加按钮样式和结构的调整。

 <template>
 <div class="tableWrap" ref="tableWrap">
　　//单独的导出按钮，不放到表头总的做法。
   <!-- <el-button @click="exportExcel1()">下载</el-button> -->
   <el-table
     row-style="height:28px"
     id="out-table"  //这个类是要下载的表格信息
     :height="tableheights"
     ref="multipleTable"
     :data="tableData3"
     tooltip-effect="dark"
     style="width: 100%;"
     highlight-current-row="true"
     @select="handleSelectionChange"
     @select-all="handleSelectAll"
     @cell-mouse-enter="cellMouseEnter"
     @row-dblclick="dbclick"
     cell-class-name="cellName"
     :header-row-style="{backgroundColor:'#03a9f5',padding:0,fontSize:'12px',lineHeight:'27px',}"

   >
     <!-- <el-table-column
       type="selection"
       width="60">
     </el-table-column> -->
     <el-table-column
       :height:="30"
       v-for="(col,index) in tableTitle.rolecols"
       :label='col.label'  :width="tableWidth"
       :prop="col.prop" :key="index" >
     </el-table-column><!--获取索引-->
 下面这条是插入的按钮占的坑，通过render-header插入模版
     <el-table-column
       :render-header="renderHeader"
       width="200">
     </el-table-column>
   </el-table>
 </div>
 </template>

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

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