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

最新推荐文章于 2025-08-18 21:39:46 发布

原创最新推荐文章于 2025-08-18 21:39:46 发布 · 1.3w 阅读

9 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

157 篇文章

订阅专栏

本文介绍如何在使用 Element UI 的表格组件中，通过 render-header 方法在表头添加导出按钮，实现数据导出功能。文章详细解释了代码实现过程，包括按钮的样式调整和事件绑定，强调了使用箭头函数的重要性。

部署运行你感兴趣的模型镜像

在页面中利用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并且要用箭头函数，重点强调！！！

您可能感兴趣的与本文相关的镜像