Element-Ui中的el-progress指定进度条内容
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
根据官网中:
可以看出format方法是可以控制指定文字显示的。
在这里后端给我返回的就是百分比,所以要做到在进度条里显示数量。直接贴代码:
<table style="color: white;width: 100%;height: 100%;">
<tr>
<th style="width:10%">产线名称</th>
<th style="width:15%">产品型号</th>
<th style="width:25%">工单号</th>
<th style="width:10%">工单数量</th>
<th style="width:40%">工单执行进度</th>
</tr>
<tr v-for="(list,index) in data.prdOrd">
<td>{{list.wkln}}</td>
<td>{{list.mtr}}</td>
<td>{{list.cod}}</td>
<td>{{list.planQty}}</td>
<td>
<el-progress :text-inside="true" :stroke-width="26" :percentage="list.fnshQty" color="#068AC7" :format="format(list,index)"></el-progress>
</td>
</tr>
</table>
methods: {
format(list, index) {
return () => {
return Math.round(list.planQty*(list.fnshQty/100))
}
},
}
关于format函数里面放一个箭头函数,有人会觉得很怪异,刚开始我也是正常函数,正常输出,但是会报错format需要传入函数,所以才会这么写。
后端返回的数据:
最后显示的数据:
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)