最新要闻

广告

手机

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

家电

记录--Vue中如何导出excel表格

来源:博客园


(相关资料图)

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

一、导出静态数据

1、安装 vue-json-excel

npmivue-json-excel

注意,此插件对node有版本要求,安装失败检查一下报错是否由于node版本造成!

2、引入并注册组件(以全局为例)

import Vue from "vue";import JsonExcel from "vue-json-excel"; //引入excel插件Vue.component("downloadExcel", JsonExcel);//注册

3、使用

在template节点下使用download-excel标签即可

      导出   //可以无需button    

在data节点下定义数据

dataAttr: [        {          id: 1,          name: "九转大肠",          price: 999,          sellCount: 6,          rating: 100        }],      fields: { // 数据名称及对应的值        编号: "id",        名称: "name",        价格: "price",        销量: "sellCount",        好评率: {          field: "rating",          callback: value => `${value}%` // 以对象方式可以对数据做处理        }      },      exportName: "这是表格名称",      exportSheet: "这是表格sheet的名称",      exportHeader: "这是表格的标题",      exportFooter: "这是表格的页脚",      exportDefaultValue: "这是一个默认的数据"

点击导出

二、导出动态数据

如果需要在点击按钮前动态的获取数据,则需要使用fetch属性来指定一个参数。

注意,使用此参数时不能再绑定data参数

以导出一个外卖商品列表为例:

1、为fetch属性绑定了一个回调。

      导出{{ exportName }}    

2、在methods节点下定义方法

getDataAttr() {      const dataAttr = []     //定义导出数据      this.goodsList.forEach((value) => {   //进行数据处理        let dataAttrItem = new createExcleData(value.id, value.name, value.price,  value.sellCount, value.rating)          //使用引入的createExcleData        dataAttr.push(dataAttrItem) //为导出的数据数组添加数据      })      return dataAttr //数据整理完毕    },

3、新建一个js文件封装一个类创建每条数据

export default class DataAttr {  constructor(id, name, price, sellCount, rating) {    this.id = id;    this.name = name,    this.price = price,    this.sellCount = sellCount,    this.rating = rating;  }}

4、在组件下引入,然后就可以使用了

import createExcleData from "@/utils/createExcleData" 

goodsList数据如下

点击导出,打开导出文件

本文转载于:

https://juejin.cn/post/7204742703506522171

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

关键词: