Element-Ui中的el-progress指定进度条内容

根据官网中:
在这里插入图片描述
可以看出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需要传入函数,所以才会这么写。
在这里插入图片描述

后端返回的数据:
在这里插入图片描述
最后显示的数据:
在这里插入图片描述

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值