element的el-steps我通过v-for循环展示里面的每一行信息我需要处理,我就用了方法
handlerCatalogue来处理,
我重新定义一个数据lineOneIntro ,每次return的lineOneIntro ,但是会执行103次,
导致我页面卡死,死循环,我直接return我处理的数据 不用return lineOneIntro,因为响应式每次 lineOneIntro变化都会执行,导致循环很多次,直接浏览器卡死
<el-steps
:active="0"
direction="vertical"
finish-status="success"
process-status="wait"
>
<el-step
style="margin-top: 50px"
v-for="(item, index) in props.catalogueList.length > 0
? props.questiondetailCatalogue
: questionCatalogue"
:key="index"
:status="item.status ? 'success' : 'wait'"
>
<!-- margin-top: 38px -->
<template v-slot:description>
<div style="margin-left: 10px">
<div
style="display: flex; align-items: center; cursor: pointer"
@click="goQuestionExam(item)"
>
<p style="font-size: 16px; margin: 0">
{{ handlerCatalogue(item) }}
</p>
<span
style="font-size: 13px; color: #86909c; margin-left: 10px"
:style="{
color: item.status
? '#2C68FF'
: item.isExist
? item.isPass
? '#F95248'
: '#86909C'
: '#86909C',
}"
>{{
item.status
? "已完成"
: item.isExist
? item.isPass
? "未通过"
: "进行中"
: "未开始"
}}</span
>
</div>
<p style="font-size: 18px; margin-top: 4px">问卷</p>
<p style="font-size: 12px; color: #86909c; margin-top: 4px"></p>
</div>
</template>
</el-step>
</el-steps>
const lineOneIntro = ref("");
const handlerCatalogue = (item) => {
switch (item.completesEnums) {
case 1:
这种就不行
// lineOneIntro.value = "视频 " + formatVideoDuration(item.seconds);
// return lineOneIntro.value
return "视频 " + formatVideoDuration(item.seconds);
break;
case 2:
return "问卷 " + item.summary;
break;
case 3:
return "考试 " + item.summary;
break;
case 4:
return "视频 " + formatVideoDuration(item.seconds);
break;
case 5:
//lineOneIntro.value = item.title;
return item.title;
break;
default:
return "数据出现问题请刷新";
}
};