Vue element-ui表格内嵌进度条功能实现方法

<template slot-scope="scope">
   <el-progress
   type="line"
   :stroke-width="15"
:percentage="scope.row.progress"
:color="blue"
   ></el-progress>
</template>

<el-table :data="jinDuData" style="width: 100%">
             <el-table-column
               prop="zhuangtai"
               label="状态"
             >
               <template scope="scope">
                 <span v-if="scope.row.zhuangtai==='进行中'" style="color: green">进行中</span>
                 <span v-else-if="scope.row.zhuangtai==='已延期'"  style="color: red">已延期</span>
                 <span v-else-if="scope.row.zhuangtai==='未开始'"  style="color: orange">未开始</span>
                 <span v-else style="color:gray"><del>已结束</del></span>
               </template>
             </el-table-column>
             <el-table-column
               prop="progress"
               label="进度"
             >
               <template slot-scope="scope">
                 <el-progress
                   type="line"
                   :stroke-width="15"
                   :percentage="scope.row.progress"
                   :color="blue"
                 ></el-progress>
               </template>
      </el-table-column>
</el-table>

<script>
export default {
 data() {
   return {
     reverse: true,
     jinDuData:[{
       zhuangtai:'进行中',
       progress:10
     },{
       zhuangtai:'进行中',
       progress:90
     },{
       zhuangtai:'已延期',
       progress:50
     },{
       zhuangtai:'已延期',
       progress:70
     },{
       zhuangtai:'未开始',
       progress:100
     },{
       zhuangtai:'已结束',
       progress:10
     },{
       zhuangtai:'已结束',
       progress:30
     }],
}
</script>