element 导出全部、导出指定列或指定行

首先下载xlsx和file-saver的依赖

npm install --save xlsx file-saver

在需要的组件引入xlsx和file-saver

import FileSaver from "file-saver";
import XLSX from "xlsx";

第一种:导出整个表格

参考的文件地址:https://www.cnblogs.com/charles8866/p/11303397.html

各位可以这个地址看看,比较详细

给table表格设置一个id

<el-table id="out-table"></el-table>

导出按钮绑定导出的方法

<el-button type="primary" @click="exportExcel">导出</el-button>

在methods中写导出的方法

exportExcel() {
  var xlsxParam = { raw: true }
  let wb = XLSX.utils.table_to_book(document.querySelector("#out-table"),xlsxParam);
  let wbout = XLSX.write(wb, {
    bookType: "xlsx",
    bookSST: true,
    type: "array"
  });
  try {
    FileSaver.saveAs(
      new Blob([wbout], { type: "application/octet-stream" }),
      '导出表格的名字.xlsx'
    );
  }
  catch (e) {
    if (typeof console !== "undefined") console.log(e, wbout);
  }
  return wbout;
}

如果表格使用了固定列fixed属性,会导出两个重复表格,需要改下代码

exportExcel() {
  var xlsxParam = { raw: true }
  var table = document.querySelector('#out-table').cloneNode(true)
  table.removeChild(table.querySelector('.el-table__fixed')) 
  //通过css选择器获取一个table表格
  var wb = XLSX.utils.table_to_book(table, xlsxParam)
  let wbout = XLSX.write(wb, {
    bookType: "xlsx",
    bookSST: true,
    type: "array"
  });
  try {
    FileSaver.saveAs(
      new Blob([wbout], { type: "application/octet-stream" }),
      '导出表格的名字.xlsx'
    );
  }
  catch (e) {
    if (typeof console !== "undefined") console.log(e, wbout);
  }
  return wbout;
}

这种导出并不适用有操作列的表格,导出的表格会有操作这一列

第二种:导出指定列或导出指定行

参考地址:https://blog.csdn.net/qq_36942042/article/details/103367084

此方法除下载xlsx和file-saver的依赖外,另外需要下载script-loader的依赖和Blob.js和Export2Excel.js

下载script-loader的依赖

npm install -D script-loader

Blob.js和Export2Excel.js

链接:https://pan.baidu.com/s/1VVLvHW4syBAUN0chrighGA 
提取码:jksk

Export2Excel.js的修改

参考:在src文件夹下创建excel文件夹

页面不需要引入xlsx、file-saver和script-loader

exportHzb() {
  let that = this;
  require.ensure([], () => {
    const { export_json_to_excel } = require('@/excel/Export2Excel'); 
    //使用绝对路径引入Export2Excel.js
    const tHeader = ['姓名','性别',]; // 导出的表头名
    const filterVal =['name','sax',]; // 导出的表头字段名
    const list = that.dataList;
    //把table表格绑定的数组赋值给list,如果是多选后导出,把多选后绑定的数组赋值给list
    const data = that.formatJson(filterVal, list);
    export_json_to_excel(tHeader, data, '导出文件名');
  });
},
formatJson (filterVal, jsonData) {
  return jsonData.map(v => filterVal.map(j => v[j]));
},

  • 6
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
### 回答1: element-ui是一款基于Vue.js的组件库,它提供了丰富的UI组件,让我们能够更轻松地开发Web应用程序。其中,Element提供了一个Table组件,用于展示和操作数据表格。 在element-ui的Table组件中,我们可以通过一些配置项来实现数据的导出功能。首先,我们可以使用Excel导出Element提供了一个名为"el-table-export"的组件,我们只需将Table的数据传入该组件即可实现将数据导出为Excel文件。同时,我们还可以配置是否导出表格的头部信息,以及自定义导出文件的名称。 另外,我们也可以使用CSV导出数据,在Table组件中,可以通过配置"show-summary"属性来实现数据合计,然后将数据通过"el-table-column"的"sum-method"属性自定义合计的函数。最后,我们可以通过"el-table-column"组件的"label"属性来定义表格的名,然后在表格下方添加一个"el-table-column"组件,将合计结果展示在该上。通过这种方式,我们可以将合计结果一同导出为CSV文件。 总的来说,element-ui的Table组件提供了丰富的配置项和功能,使得我们能够灵活地进数据导出。通过简单的配置和自定义函数,我们可以实现将表格数据导出为Excel或CSV文件,从而方便地保存和使用表格数据。 ### 回答2: Element 表格导出是指将 Element 组件中的表格数据导出到其他文件格式(如 Excel、CSV等)的操作。Element 是一个基于 Vue.js 的前端UI框架,提供了丰富的组件库以及实用的工具函数,包括了表格组件,用户可以在应用中使用 Element 的表格组件展示和操作数据。 Element 表格导出的功能是开发者在使用 Element 表格组件时很常用的一个需求。通过使用 Element 提供的方法,我们可以将表格中的数据导出为 Excel 或 CSV 文件,以便后续的数据处理或其他用途。 在 Element 中,我们可以通过以下步骤来实现表格导出: 1. 引入 Element 的相关组件和样式文件,确保项目中已正确安装了 Element 框架; 2. 创建一个 Element 表格组件,并通过设置数据源、定义等属性来展示数据; 3. 在需要导出表格的地方,添加一个按钮或其他触发导出操作的事件; 4. 在事件处理函数中,使用 Element 提供的导出方法,将表格数据导出指定格式的文件。 例如,如果要将表格数据导出为 Excel 文件,可以使用 Element 提供的 `exportCsv` 方法,传入需要导出的表格数据和文件名,即可生成一个 Excel 文件供下载或保存。同样,如果要将表格数据导出为 CSV 文件,可以使用 `exportCsv` 方法,只需设置导出格式为 CSV 即可。 总之,Element 表格导出Element 框架提供的一个功能,可以帮助开发者方便地将表格数据导出为其他文件格式,以满足不同的需求和用途。通过 Element 的强大功能和简洁易用的接口,我们可以高效地实现表格导出功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值