v-if和v-for遇到同时使用场景时的解决方案

---

前言

开发中经常会遇到的场景v-if和v-for同时使用

例如：我在某个机构下需要选择其它组织,这个列表不应该包含当前登录的组织

<el-select v-model="subprocessForm.diagram" placeholder="请先选择组织后，再选择流程图"  @change="valueChange($event, 'diagram', subprocessForm.diagram)" clearable>
            <el-option
              v-for="item in getDiagramOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>

 computed: {
    getDiagramOptions(){
      return this.diagramOptions.filter((item) => item,id !== this.id)
    }

又或者你需要根据列表项的某个值是否为真去判断,而这个列表是属于多层渲染的

<template v-for="(ins) in aprOption">
  <el-timeline-item v-for="(activity, index) in insRecords(ins.records)" :key="index" :type="activity.type" :color="activity.color">
  </el-timeline-item>
  </template>

computed: {
     insRecords(list){
      return  list.filter((item) => item.hasContent)
    },
  },