ElementUi Progress 进度条的小坑

今天在开发的过程中遇到了一个element 进度条的一个小坑 特此记录下来 希望能给大家一些帮助

首先呢 需求是下面这个样子

然后我的尝试 下面是原代码

<el-progress type="circle" :percentage="75" color="#3d7ad5" stroke-linecap="butt" :stroke-width="20"
                    :width="100"  :format="format"></el-progress>

 format(percentage) {
        return percentage === 100 ? `${percentage}%` + '指标值' : `${percentage}%` + '\n' + '指标值'
      },

满心欢喜的打开了我的浏览器

这是什么!!! 为什么没有生效呢!!!

后来鼓捣了半天 各种尝试 在标签里添加一个 style=" white-space: pre;" 就可以了 解决后的代码是这样

<el-progress type="circle" :percentage="75" color="#3d7ad5" stroke-linecap="butt" :stroke-width="20"
                    :width="100" style=" white-space: pre;" :format="format"></el-progress>

完美解决 哈哈哈

今天的分享就到这里 感谢大家的观看 对你们有用的HXD 可以点个赞嘛~~~~