报错信息指出组件的 percentage
属性期望的类型是 Number
,但实际上得到的是 String
类型(值为 "36"
)。这通常是因为您在计算 percentage
时将其转换为了带有 %
符号的字符串,而 <el-progress>
组件无法处理这种格式的字符串。
onst data = res.series;
let count = data.map(item => item.data[0]);
const total = count.reduce((a, b) => a + b, 0);
this.occupancyList = [];
let dataList = [];
data.forEach(v => {
dataList.push({
name: v.name,
// img: i < 10 ? "0" + i : i + "",
num: v.data[0],
percentage: total === 0 ? 0 : ((v.data[0] / total) * 100).toFixed(2) + "%", //百分比
progressBar: total === 0 ? 0 : ((v.data[0] / total) * 100).toFixed(0) //进度条
});
});
this.occupancyList = dataList;
<div
class="comeBox-Item comeBox-Item1"
v-for="(item, index) in data"
:key="index"
:class="[item.img ? '' : 'itemBottom']"
>
<div class="fl" v-if="item.img">
<img :src="require('./img/' + item.img + '.png')" />
</div>
<div class="comeBox-Item-text1 fl">
<span>{{ item.name }}</span>
<span
>{{ item.num }}
<span v-if="item.unit">{{ item.unit }}</span>
({{ item.percentage }})</span
>
</div>
<div class="comeBox-Item-scroll1 fl">
<el-progress
:color="customColor2"
:width="433"
:show-text="false"
:define-back-color="customColor2"
:percentage="item.progressBar"
stroke-linecap="square"
></el-progress>
</div>
首先,确保 percentage
属性在 dataList
中仍然是字符串,但为 <el-progress>
提供一个没有 %
符号的进度值。您可以在模板中通过计算属性或方法来实现这一点,但在这里,我们可以直接在模板中处理它:
我在 :percentage
中使用了 parseInt(item.progressBar)
而不是 item.percentage
。这是因为 item.progressBar
是在您的 dataList
中计算的进度条值(不带 %
符号),而 item.percentage
是带有 %
符号的字符串,用于显示给用户看。
<el-progress
:color="customColor2"
:width="433"
:show-text="false"
:define-back-color="customColor2"
:percentage="parseInt(item.progressBar)" <!-- 注意这里使用 item.progressBar 而不是 item.percentage -->
stroke-linecap="square"
></el-progress>