zoukankan      html  css  js  c++  java
  • 在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并且要用箭头函数,重点强调!!!

  • 相关阅读:
    LeetCode 811. Subdomain Visit Count (子域名访问计数)
    LeetCode 884. Uncommon Words from Two Sentences (两句话中的不常见单词)
    LeetCode 939. Minimum Area Rectangle (最小面积矩形)
    LeetCode 781. Rabbits in Forest (森林中的兔子)
    LeetCode 739. Daily Temperatures (每日温度)
    三种方式实现按钮的点击事件
    239. Sliding Window Maximum
    14.TCP的坚持定时器和保活定时器
    13.TCP的超时与重传
    12.TCP的成块数据流
  • 原文地址:https://www.cnblogs.com/liweiz/p/10694376.html
Copyright © 2011-2022 走看看