步骤:
el-table中使用插槽方法:
<el-table-column
prop="num"
label="里程数"
sortable=""
width="250"
>
<template slot-scope="scope">
<el-progress type="line" :percentage="(scope.row.num)/percent*100" :format="format(scope.row,scope.column)" color="#57DCDD" :text-inside="false" :stroke-width="12" />
</template>
</el-table-column>
注意:percent为表格第一位num值(后端返回数据为排序后数据),相当于以第一位为基准实现进度条,这样视觉效果较好(第一位进度条为充满状态)
格式化进度条列显示文字:
format(row, column) {
return () => {
if (column.label === '里程数') {
return row.num + 'km'
}
}
}
如图效果: