vue @femessage/excel-it

科技达人ლ(′◉❥◉｀ლ)

已于 2022-07-15 22:55:10 修改

阅读量212

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2022-07-15 22:46:56 首次发布

本文链接：https://blog.csdn.net/m0_56175362/article/details/125813550

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1.下载插件

yarn add @femessage/excel-it

2.使用的页面引入插件

import {exportExcel} from '@femessage/excel-it'

3.创建文件夹写入需要下载的模板
在这里插入图片描述
4.引入模板文件

import {templateColumns} from '../../../../const/export-goods-template-columns'

5.使用组件

//<html>部分
<template>
  <div>
    <el-button type="text" size="middle" @click="exportTable">下载</el-button>
  </div>
</template>
<script>
  export default {
    data() {
    return {
      failureInfo: [],
    }
  },
  //点击事件
exportTable() {
      exportExcel(
        {
          columns: Object.keys(templateColumns).map(k => ({
            prop: k,
            label: templateColumns[k],
          })),
          data: this.failureInfo,
          //下载的文件名
          fileName: '商品信息表',
        },
        () => {
          this.$message.success('导出表格成功')
        },
      )
    },
  }
</script>