问题：在vue项目中table列表要怎么展示svga格式动画图标效果？

遇到的问题：

最近在做项目的时候，需要在项目中table列表要怎么展示svga格式动画图标效果。第一次接触那么要怎么处理呢？

解决思路：

一、先了解一下svga是什么？

SVGA 是一种跨平台的开源动画格式，同时兼容 iOS / Android / Web。SVGA 除了使用简单，性能卓越，同时让动画开发分工明确，各自专注各自的领域，大大减少动画交互的沟通成本，提升开发效率。动画设计师专注动画设计，通过工具输出 svga 动画文件，提供给开发工程师在集成 svga player 之后直接使用。动画开发从未如此简单！

SVGA 除了使用简单，性能卓越，同时让动画开发分工明确，各自专注各自的领域，大大减少动画交互的沟通成本，提升开发效率。

动画设计师专注动画设计，通过工具输出 svga 动画文件，提供给开发工程师在集成 SVGAPlayer 之后直接使用。

SVGA 是一种同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式。Svga.io官网是如此介绍的。官网链接https://svga.io

二、Vue项目如何使用

1.安装

npm install svgaplayerweb —save

或者使用的yarn进行包管理，所以命令是：

yarn add svgaplayerweb

2.引入

import SVGA from 'svgaplayerweb'

3.实例化对象

html部分使用了Element UI的table表格

<el-table-column  label="特效展示" >
    <template slot-scope="scope">
        <div :id='"Img"+scope.row.id' style="width: 100px;height: 100px;"></div>
    </template>
</el-table-column>

Script部分

getData(data){
    this.dataGroup = data;  //获取数据
    if(this.dataGroup !=""){
        this.getSvga(this.dataGroup);
    }
},
//获取Svga图标
getSvga(data){
    var url = "";
    //一定要使用$nextTick，等到页面加载完成再处理数据，否则会找不到页面元素，报Undefind的错误
    this.$nextTick(()=>{
        data.map((v,i)=>{
            var player = new SVGA.Player('#Img'+v.id); // 多个svga文件同时加载
            var parser = new SVGA.Parser('#Img'+v.id); // 多个svga文件同时加载
            //若是单个文件，则直接获取其Id即可
            url = "/api/file/fileId="+v.fileId; //这里动态加载dataGroup返回的数据
            parser.load(url,function(item){
                player.setVideoItem(item);
                player.startAnimation();
            })
        })
    })
}