今天在做專案上遇見了一個需求，通過不能的進度型別展示不同的進度形態，進度形態通過背景色和背景色上的文字顯示。

效果圖：

由於Element UI版本我用的是2.5.4  使用進度條的話 就沒有2.9.2及更高版本的format屬性，format屬性：自定義進度條的文字內容

所以就只能自己實現類似於進度條的形狀：

實現步驟：

1.定義一個p標籤，p標籤裡面包含顯示文字的a標籤，內顯文字顯示為白色

<p class="rcorners4" :style="scope.row.firstQuarterSpeedofProgress|getBackgroundColor"><a style="color:white">{{scope.row.firstQuarterSpeedofProgress|getSpeedofProgress}}</a></p>

 2.定義基本rcorners4樣式

 .rcorners4 {

    text-align: center;

    border-radius: 50px 50px 50px 50px;

    width: 80px;

    height: 26px;

   }

3.通過Vue過濾器實現動態切換顏色及文字文字

            getSpeedofProgress(val){

              if(val==1){return '已完成'}

              if(val==2){return '應完未完'}

              if(val==3){return '進度滯後'}

              if(val==4){return '正常推進'}

            },

            getBackgroundColor(val){

                 switch(val){

                    case 1: return 'background: #22A7FF';break

                    case 2: return 'background: red';break

                    case 3: return 'background: #EEEE11';break

                    case 4: return 'background: #2BD54D';break

                    default:return 'background: white';

                }

            }