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

最新推荐文章于 2024-08-29 21:07:49 发布

m0_52611940

最新推荐文章于 2024-08-29 21:07:49 发布

阅读量207

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_52611940/article/details/141639242

版权

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 "数据出现问题请刷新";
  }
};