[vue]vue+Element-ui表格导出Excel报表

楼主^#

更多发布于：2019-11-25 20:33

项目中遇到导出Excel报表功能。由于该组件内部引用了xlsx.js，file-saver.js和elementUI，因此在使用该组件时，请先安装如下依

npm install xlsx file-saver element-ui --save

安装好依赖后，只需将该组件代码ExportExcel导入到现有项目中即可使用。

&lt;template&gt;
  &lt;div id="app"&gt;
   &lt;export-excel v-if="list !== null" 
              :list="list" 
              :theader="tHeader" 
              :tvalue="tValue"&gt;
   &lt;/export-excel&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
import  ExportExcel from './ExportExcel'
export default {
  name: 'app',
  components: { ExportExcel},
  data() {
    return {
      list:null,
      tHeader:['Id', '类型', '内容', '时间（段）', '次数'],
          tValue:['id', 'type', 'content', 'time', 'count'],
    }
  }
}
&lt;/script&gt;

属性	描述	类型	必须
list	后台返回的表格数据	Array	true
tHeader	导出Excel文件表标题	Array	true
vValue	导出Excel字段名，与表头对应	Array	true

filename

导出Excel文件名，默认“导出数据名.xlsx”

String

false

实例如下：

&lt;ExportExcel :list="inspectionList"
                      :tHeader="tHeader"
                      :tValue="tValue"&gt;&lt;/ExportExcel&gt;

喜欢0

橘子色贫民最后登录2019-11-26 发帖数1 加关注写私信	沙发^# 发布于：2019-11-26 18:18 可以啊，厉害哦，谢谢分享
	回复(0) 喜欢(0)

676124107 贫民最后登录2021-03-10 发帖数1 加关注写私信	板凳^# 发布于：2019-11-26 16:57 你是小房吗？写的可以啊
	回复(0) 喜欢(0)

969188664 贫民最后登录2020-02-13 发帖数2 加关注写私信	地板^# 发布于：2019-11-25 21:59 老徐威武感谢分享老徐威武感谢分享
	回复(0) 喜欢(0)

发帖回复

« 返回列表

您需要登录后才可以回帖，登录或者注册

返回顶部

公众号

[vue]vue+Element-ui表格导出Excel报表

最新喜欢：