个人推荐的两款vue导出EXCEL插件

缺乏、安全感 2022-03-02 20:08 1641阅读 0赞

**第一种vue-json-excel  
第二种vue2.0-excel**

下面开始讲第一种vue-json-excel

npm安装依赖包

npm install vue-json-excel

项目入口文件引进注册并且使用

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

在页面中使用

<download-excel class = "export-excel-wrapper"
                :data = "json_data"
                   :fields = "json_fields"
                   :type = "fileType" >
            <el-button type="primary" >导出EXCEL</el-button>
        </download-excel>
    </el-form-item>

简单说明一下组件属性

json_data: 需要导出的数据
    json_fields: 自主选择要导出的字段，指定嵌套数据并将标签分配给键是标签的字段，值是JSON字段。这将“按原样”导出字段数据。如果需要自定义导出的数据，可以定义回调函数。

属性名 类型 描述  
data :Array 需要导出的数据，支持中文  
fields :Object 定义需要导出的数据  
name :string 导出EXCEL的文件名  
type :string 导出EXCLE的文件类型，两种格式xls,csv,默认是xls  
可能上面描述不是很明白，下面给个实例，

注意一下几:  
json\_fields里面的属性是excel表每一列的title,  
注意多个词组组成的属性名要加双引号  
如果需要自定义导出的数据，可以定义回调函数。

<script>
        export default {
            data() {
                return {
                    reportList: '',
                    fileType: 'csv',
                    json_fields: {
                        "任务编号": "task_code",    //常规字段
                        "店铺名称": "shop_name",    //常规字段
                        "关键字": "keywords",    //常规字段
                        "本金(元)": "money",    //常规字段
                        "状态":{
                                field: 'status',
                                    //自定义回调函数
                                    callback: value => {
                                    if (value!==6){
                                        return '未完成';
                                    }else{
                                        return '已完成';
                                    }
                                }
                            },
                        "日期": "updated_at",    //常规字段
                    },
                    json_data: [],
    
                    json_meta: [
                        [{
                            " key ": " charset ",
                            " value ": " utf-8 "
                         }]
                    ],
                    merchant_id: this.$route.params.merchant_id,
                    formInline: {
                        task_code: '',
                        shop_name: '',
                        money:'',
                        keywords:'',
                    }
                }
    
            },
            methods: {
                onSubmit() {
                    this.initDataList();
                },
                open3(msg) {
                    this.$notify({
                        title: '成功',
                        message: msg,
                        type: 'success'
                    });
                },
                open4(msg) {
                    this.$notify({
                        title: '警告',
                        message: msg,
                        type: 'warning'
                    });
                },
                open6(msg) {
                    this.$notify.error({
                        title: '错误',
                        message: msg
                    });
                },
    
    
                initDataList(){
                    var pamras = {
                        merchant_id:this.merchant_id,
                        task_code:this.formInline.task_code,
                        shop_name:this.formInline.shop_name,
                        money:this.formInline.money,
                        keywords:this.formInline.keywords,
                    }
                    this.$axios({
                        method:'get',
                        url:'api/task/shop',
                        params:pamras
                    }).then((res) =>{          //这里使用了ES6的语法
                        if (res.data.code==='200'){
                            this.reportList = res.data.data;
                            this.json_data = res.data.data;
                        }
                    }).catch((error) =>{
                        this.open6(error.data.message)       //请求失败返回的数据
                    })
                },
    
    
            },
            created:function(){
    
                //初始化数据
                this.initDataList();
            },
        }
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，1641人围观）

还没有评论，来说两句吧...

相关阅读

相关 IDEA 吐血推荐几款插件

1.CodeMaker ![format_png][] 使用在 Java 类编辑界面右键“Generate”，选择对应模板即可自动生成代码到当前类的包 ![

た入场券/ 2023年02月17日 01:21/ 0 赞/ 124 阅读

相关 Vue插件之导出EXCEl

[https://www.cnblogs.com/yy136/p/10015561.html][https_www.cnblogs.com_yy136_p_10015561.h

淡淡的烟草味﹌/ 2022年12月28日 07:46/ 0 赞/ 213 阅读

相关 IDEA-推荐几款好用的插件

.ignore git提交时过滤掉不需要提交的文件，很方便，有些本地文件是不需要提交到Git上的。 TranslationPlugin 对于不经常使用英语的同学来说，

悠悠/ 2022年12月23日 14:28/ 0 赞/ 414 阅读

相关推荐超实用的8款jQuery插件

[![53967cba-ed25-42e1-aef0-538fd0d7bf8a.jpg][]][53967cba-ed25-42e1-aef0-538fd0d7bf8a.jpg

Love The Way You Lie/ 2022年08月26日 14:20/ 0 赞/ 319 阅读

相关推荐几款Wordpress摘要插件

Wordpress 的博客设计问题一般可通过两个渠道进行解决： 1.修改主题模板文件 2.利用相应的插件文章摘要对于快速准确的让读者了解文章内

左手的ㄟ右手/ 2022年08月03日 08:15/ 0 赞/ 373 阅读

相关推荐几款非常实用的IDEA插件

> 推荐几款让你开发效率倍增的IDEA插件，解决你开发中可望而又不好找的插件。 1、Alibaba Java Coding Guidelines 经过247天的持续研发

深藏阁楼爱情的钟/ 2022年06月02日 04:58/ 0 赞/ 377 阅读

相关 IDEA-推荐几款好用的插件

1 RestfulToolkit Java WEB开发必备，再也不用全局搜索RequestMapping了。 ![2018113014115468.png][] 2

清疚/ 2022年04月12日 02:28/ 0 赞/ 419 阅读

相关推荐idea几款优秀插件

Lombok plugin [https://github.com/mplushnikov/lombok-intellij-plugin][https_github.com

痛定思痛。/ 2022年04月04日 15:39/ 0 赞/ 391 阅读

相关个人推荐的两款vue导出EXCEL插件

第一种vue-json-excel 第二种vue2.0-excel 下面开始讲第一种vue-json-excel npm安装依赖包 npm install v

缺乏、安全感/ 2022年03月02日 20:08/ 0 赞/ 1642 阅读

相关推荐：几款好用的Chrome插件

1、SourceGraph Github一个不好的地方就是代码是不能相互跳转的，所以阅读起来很累，如果我要引入一个库，那么就必须clone下来然后通过idea打开才行。这样的

╰半夏微凉°/ 2021年10月13日 00:49/ 0 赞/ 596 阅读