当前位置：首页 > news >正文

element的el-steps里的数据处理用switch 循环，处理的数据不要vue响应式的值

news 来源：原创 2024/9/18 17:37:02

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-stepstyle="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"><divstyle="display: flex; align-items: center; cursor: pointer"@click="goQuestionExam(item)"><p style="font-size: 16px; margin: 0">{{ handlerCatalogue(item) }}</p><spanstyle="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.valuereturn "视频 " + 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 "数据出现问题请刷新";}
};