vue的element的table表头自定义添加按钮

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

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

<template slot="operation" slot-scope="{col}">
  <el-table-column
    :key="col.index"
    :label="col.name"
    :prop="col.index"
    :render-header="renderHeader"
    :width="col.width">
    <template slot-scope="scope">
      <el-row>
        <el-button type="text" @click="handerEditor(scope.$index, scope.row)">编辑</el-button>
      </el-row>
    </template>
  </el-table-column>
</template>

 

添加按钮

// 表头插入导入按钮
renderHeader () {
  return (
     <div>
    操作
    //其中的这个oclick一定要用箭头函数来表示，不然会出现触发不了，可能在其他事件中被无数次触发的反人类现象。（我也很好奇）
    <el-button size='small' on-click={()=>this.exportExcel()}> <span  class='el-icon-upload2'></span> 导出</el-button>
     </div>
     )
}

//  导出表格的事件

exportExcel（）{

}

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