本文主要是介绍element的el-steps里的数据处理用switch 循环，处理的数据不要vue响应式的值，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
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 "数据出现问题请刷新";}
};
这篇关于element的el-steps里的数据处理用switch 循环，处理的数据不要vue响应式的值的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
