Type	進度條類型line/circle/dashboard
:text-inside	進度條顯示文字內置在進度條內（只在 type=line 時可用）
:percentage	百分比（必填）
:color	進度條背景色（會覆蓋 status 狀態(tài)顏色）

三、實驗結果與討論

1.前期準備工作

寫出基出表格

1.2使用JavaScript

當el-table元素中注入data對象數(shù)組后，在el-table-column中用prop屬性來對應對象中的鍵名即可填入數(shù)據(jù)，用label屬性來定義表格的列名?？梢允褂脀idth屬性來定義列寬。

Element組件地址https://element.eleme.cn/#/zh-CN/component/table

2.實現(xiàn)功能

使用數(shù)組，自定義進度條數(shù)值。:percentage="scope.row.progress"

根據(jù)scope.row行數(shù)據(jù)變化動態(tài)顯示行內控件，progress是定義的變量進行賦值。

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

3完整實驗代碼

<el-table :data="jinDuData" style="width: 100%">
             <el-table-column
               prop="zhuangtai"
               label="狀態(tài)"
             >
               <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>