使用element UI中的Progress动态循环渲染

最新推荐文章于 2024-06-17 08:54:55 发布

张艺昌

最新推荐文章于 2024-06-17 08:54:55 发布

阅读量1.8k

点赞数 1

分类专栏： vue 文章标签： ui elementui vue.js

本文链接：https://blog.csdn.net/weixin_43185511/article/details/122130721

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在闲暇时间做了一个关于投票的功能。使用elementUI来显示投票情况。
先看效果图

在这里插入图片描述
上代码

 <div id="fors"  v-for="item in viewArray">
                <div>{{item.student.fullname}}</div>
                <el-progress :percentage="(item.vote/voteCount)*100"></el-progress>
                <el-divider></el-divider>
            </div>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="viewFormVisible = false" size="mini">关 闭</el-button>
                </div>

viewArray结构如下

viewArray:[{student:{fullname:"**"}},vote:1,其他···]

js方法

 _this.$axios.post("/Compare/getVote/"+row.compareId).then(function (resp) {
                    _this.viewArray = resp.data.compareStudents;
                    var a = resp.data.compareStudents
                    _this.voteCount = 0;//统计总票数，每次清零
                    for( var i =0;i<a.length;i++){
                        _this.voteCount+=a[i].vote;
                    }
                })