如何将el-table的数据导出?

简介: 如何将el-table的数据导出?

最近公司要求实现将表格内容导出,特地将方法分享出来供大家学习。

设计图:

首先需要安装两个相关依赖:

npm install --save xlsx file-saver

其次在该页面引入依赖

1. import FileSaver from 'file-saver'
2. import XLSX from 'xlsx'

接下来前端代码,我们设置两个参数,一个name代表导出exel表的名称,一个是el-table的id,这样极大的提高了方法的复用率。

            <div class="title1-right">
              单位排名
              <el-button type="primary" size="mini" class="button" @click="exportExcel('单位排名','unit')"><i class="iconfont icon-daochuyubaodan " style="margin:10px 10px 0 0" />导出</el-button>
            </div>
          </div>
          <el-table
            id="unit"
            v-loading="loading"
            :data="tableData"
            tooltip-effect="dark"
            height="470"
            style="width: 96%;margin: 20px auto "
            :header-cell-style="{background:'#f5f7fa',color:'#909399'}"
          >
            <el-table-column
              label="排名"
              width="80"
              align="center"
              :resizable="false"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span v-if="scope.row.ranking!=='01'&&scope.row.ranking!=='02'&&scope.row.ranking!=='03'">{{ scope.row.ranking }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="单位"
              width="120"
              align="center"
              :resizable="false"
              show-overflow-tooltip
            >
              <template slot-scope="scope">{{ scope.row.unit }}</template>
            </el-table-column>
            <el-table-column
              :resizable="false"
              show-overflow-tooltip
              label="优秀率"
              align="center"
            >
              <template slot-scope="scope">
                <el-progress :percentage="scope.row.percentage" />
              </template>
            </el-table-column>
          </el-table>

导出方法:

     exportExcel(name, id) {
      var wb = XLSX.utils.table_to_book(document.querySelector('#' + id))
      var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), name + '.xlsx')
      } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
      return wbout
    }

最终效果:

 

相关文章
|
前端开发
el-table表格还可以这么玩
我们都知道表格是横向渲染的,一行一行去展示。不过博主这里有个需求是纵向渲染,一列一列去展示,下面是全部代码,分享出来或许能帮到你们
307 1
el-table表格还可以这么玩
|
JavaScript
vue el-table导出数据表,不含有操作列和前面那个空白的checkbox
vue el-table导出数据表,不含有操作列和前面那个空白的checkbox
Element UI - el-table el-table-column 表头自定义
Element UI - el-table el-table-column 表头自定义
737 0
Element UI - el-table el-table-column 表头自定义
|
XML 数据格式
|
存储 前端开发 JavaScript
Element el-table 表格详解
本文目录 1. 前言 2. 基本用法 3. 显示斑马纹 4. 显示边框 5. 自定义尺寸 6. 显示索引 7. 显示内容过长时的提示 8. 自定义行样式 9. 固定表头 10. 固定列 11. 多级表头 12. 展开行 13. 自定义列模板 14. 单选 15. 多选 16. 前端排序 17. 小结
3429 0
Element el-table 表格详解
|
存储
el-table分页记录数据
el-table分页记录数据
173 0
|
JavaScript
Vue表格显示问题:v-show无法影响el-table-column列的解决方案
Vue表格显示问题:v-show无法影响el-table-column列的解决方案
1107 0
关于el-table单元格合并的解决方案
关于el-table单元格合并的解决方案
583 0
关于el-table单元格合并的解决方案
Element UI - el-table el-table-column v-if 切换,表头抖动解决方案
Element UI - el-table el-table-column v-if 切换,表头抖动解决方案
1677 0

热门文章

最新文章