使用vue导出表格数据

今天做项目,需要导出数据,故记录下。

下载依赖

cnpm install vue-json-excel

项目中引入

在main.js中写入如下代码:

import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)

使用

<template>
    <div>
      <download-excel
          :data = "exlTableData"
          :fields = "fieldData"
          :name = exlName>
        <a-button type="primary" icon="file-excel"> 导出 </a-button>
      </download-excel>
    </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
        exlName: '自定义表名.xls', // 自定义文件名时一定要加上.xls文件后缀
        fieldData: {
          "列头1name": "name",    //常规字段
          "列头2name": "phone.mobile", //支持嵌套属性
          "列头3name": {
            field: "phone.landline",
            //自定义回调函数
            callback: value => {
              return `自定义文字 - ${value}`;
            }
          }
        },
        exlTableData: [ // 需要导出表格的数据
          {
          name: "第一行第一列",
            phone: {
              mobile: "13333333333",
              landline: "landLine"
            }
         },
          {
            name: "第二行第一列",
            phone: {
              mobile: "18888888888",
              landline: "landLine222"
             }
          },
          {
              name: "第三行第一列",
              phone: {
              mobile: "188啦啦啦",
              landline: "landLine222"
              }
          }
      ],
    }
  }
}
</script>
本文来自投稿,不代表本站立场,如若转载,请注明出处:https://blog.itliujia.cn/info/202208141.html
-- 展开阅读全文 --
VScode同步服务器文件
« 上一篇 08-03
js输入时间戳显示时间于多久前
下一篇 » 08-20

发表评论

已有 3 条评论

  1. Teacher DuLv.2 说道:
    2022-08-19 14:54     Win 10 /  🕹️ IP:北京市

    新文沙发!

    1. 刘童鞋VLv.3 说道:
      2022-08-20 11:49     Win 10 /  🕹️ IP:广东省

      @Teacher Du

      哈哈,给杜老师看座

      1. Teacher DuLv.2 说道:
        2022-08-22 00:38     Win 10 /  🕹️ IP:北京市

        @刘童鞋

        哈哈,我坐下了!