因为在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并且要用箭头函数,重点强调!!!

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

  1. [转]iOS Safari 中click点击事件失效的解决办法

    iOS Safari 中click点击事件失效的解决办法 问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素 ...

  2. iOS Safari 中click点击事件失效的解决办法

    问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素添加click事件时,如果事件是委托到 document  ...

  3. vue中router-link的click事件失效的解决办法

    title: vue中router-link的click事件失效的解决办法 toc: false date: 2018-12-04 16:28:49 categories: Web tags: vue ...

  4. jquery中,使用append增加新元素时,新增元素的绑定监听事件失效的解决办法

    $("outerSelector").on("eventType","innerSelector",function(){}); 举例:如果 ...

  5. jquery中动态添加的标签绑定的click事件失效的解决办法

    把.click()换成.live('click',function(){})(如果你的jquery的版本是1.10之前) 把.click()换成.on('click',function(){})(jq ...

  6. 关于Element UI中页面样式小问题

    一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...

  7. 关于Element UI中select组件中遇到的问题

    问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...

  8. Element UI 中组件this.$message报错

    最近在做毕设的时候,用Element UI中的消息提示message一直报以下的错误: 展示的效果也不好看,没有图标什么的: 但我明明有在main.js引入了element-ui 呀,因为毕设时间很赶 ...

  9. element ui设置表格表头高度和每一行的高度

    填坑记录:今天用element ui的表格组件做用户信息展示,直接拉取的官网的代码过来,发现表头和每一行都太高了,如下: 因为第一次使用element ui的表格组件,不太清楚会遇到这样的坑,以为能轻 ...

随机推荐

  1. [LeetCode] Count Complete Tree Nodes 求完全二叉树的节点个数

    Given a complete binary tree, count the number of nodes. Definition of a complete binary tree from W ...

  2. 数据库如何生成sql语句

    以SQL SERVER 2008为例子. 1.启动客户端管理器,连接到要生成脚本的数据库. 2.在左边的”对象资源管理器“中,右键选择该数据库打开菜单.选择”任务“,”生成脚本“菜单,打开对话框. 3 ...

  3. github for windows 安装 使用

    遇到无数的未知问题.光是安装就搞了好久. 安装程序显示安装了.NET Framework4.5,然后提示重启.重启后,自动开始下载文件,最多到2%就走不动了. 后来请求了下面这个链接,才开始下载了(虽 ...

  4. 【UWP开发】一个简单的Toast实现

    Toast简介 在安卓里Toast是内置原生支持,它是Android中用来显示显示信息的一种机制.它主要用于向用户显示提示消息,没有焦点,显示的时间有限,过一定的时间就会自动消失.在UWP中虽然没有原 ...

  5. 线程池之 Callable、Future、FutureTask

    java线程中的异步和同步,并不是走路,一定要搞清楚.那么join方法嘛,就是异步变同步.线程阻塞,就再楼下一直等着它想要的状态出现喽.直接上代码,先来看Future获取线程执行结果的使用示例: pu ...

  6. GisUtil工具类:将WKT(wellKnownText)文本转换为ElasticSearch识别的空间对象字符串形式

    ElasticSearch中的Geo Shape Type: https://www.elastic.co/guide/en/elasticsearch/reference/1.4/mapping-g ...

  7. POJ_3185_The_Water_Bowls_(反转)

    描述 http://poj.org/problem?id=3185 20个碗,要全部反转过来.反转某个碗,其相邻的碗(左右两边)也要反转. The Water Bowls Time Limit: 10 ...

  8. OpenGL光源位置

    一.OpenGL光源简介 OpenGL提供了多种形式的光源,如点光源.平行光源和聚光灯光源等.所有光源都使用 glLight*接口来设置光源属性,其中包括 glLight{if} 和 glLight{ ...

  9. Dede推荐文章与热点文章不显示?

    )先看看,id 文档ID,content 标签最终内容(修改此变量后必须更新系统缓存)是不是填写的id: 进入后台->系统->基本参数设置->性能选项->id 文档ID,con ...

  10. git 随笔(随时更新)

    w:跳到下个词前面, e:跳到下个词后面,b是跳到上一个单词前面. v:选择 ,可以批量操作 q + a:  录制宏, a 是存录制地方,q录制完毕. @a :执行录制操作. @a 前面➕数字:例如1 ...