Element UI 线型进度条自定义文字内容

实现效果(思路:隐藏进度条组件的文字，自定义文字内容)

 

代码如下：

 <el-table-column label="项目时间进度" align="center" prop="percentage">
            <template slot-scope="scope">
              <div class="progresscell">
                <el-progress
                  :text-inside="true"
                  :stroke-width="24"
                  :show-text="false"
                  :percentage="progresspercentage(scope.row)"
                  :color="customColorMethod"
                ></el-progress>
              </div>
              <div class="progressText">{{ progresspercentage(scope.row)+'% 周期:' + scope.row.pmPeriod + '天' }}</div>
            </template>
          </el-table-column>

样式：

.progresscell {
  position: relative;
  text-align: center; 
  width: 120px;
}
.progressText {
  position: absolute;
  top: 12px;
  left: 20px;
}

 

*参考环形进度条自定义内容： https://blog.csdn.net/weixin_41192489/article/details/110874362