需求：
第一版使用了canvas来画的 这次看到element 有自带的进度条组件，就尝试用了一下 。做一个笔记~
代码
<div style="flex: 1" class="left-pro">
<el-progress
:text-inside="true"
:stroke-width="30"
:percentage="setItemProgress(item)"
:format="format(item)"
color="#1C4D84"
></el-progress>
<div class="pro-text">{{ item.totalCount }}</div>
</div>
相关方法代码：
后端给的数据是数值，需要转换一下
setItemProgress(data) {
return Math.round((data.usedCount / data.totalCount) * 100);
},
进度条内文字显示（根据需求自定义）
format(row) {
return () => {
return row.usedCount;
// return '已使用： ' + row.usedCount + '，总数量： ' + row.totalCount
};
},
**注：进度条内右边显示的文字 目前这里使用了一个div标签定位在上面了。大家有好的办法也可以讨论下哈~
定位–css样式：
.pro-text {
position: relative;
top: -22px;
text-align: right;
color: #1c4d84;
right: 30px;
}
实现的效果图如下：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79313.html
