怎么把手写的html放到循环出来的结构某个位置

Question

如图，前四个是v-for遍历出来的，最后一个是我单独写的，我现在向把最后一个位置和备注呼唤，应该怎么弄。

代码如下，总结为v-for遍历出来的全是表单，而最后的过渡层是表格

     <el-collapse v-model="activeNames" v-if="visible&&visible1">
        <el-collapse-item
          :title="item.title"
          :name="item.title"
          v-for="(item,index) in formItem"
          :key="index"
          class="formItem"
        >
          <el-row class="groupContent" :gutter="20">
            <el-col
              :xs="24"
              :sm="24"
              :md="12"
              :lg="12"
              :xl="6*(item.colspan+1)"
              class="item"
              v-for="(item,index) in item.group"
              :key="index"
              :class="item.propertyName"
            >
              <el-form-item
                :label="item.propertyDisplayName"
                v-if="item.controlType=='CtlTextEdit'"
                :prop="item.propertyName"
              >
                <el-input v-model="nowData[item.propertyName]"></el-input>
              </el-form-item>
              ...这下面还有很多其他类型的表单
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item title="过渡层信息" name="过渡层信息">
          <el-form class="guodu">
            <table style="margin-top:10px;">
              <thead>
                <tr>
                  <th>过渡高（米）</th>
                  <th>过渡高（英尺）</th>
                  <th>高度类型</th>
                  <th>高度参考类型</th>
                  <th>压力</th>
                  <th>压力单位</th>
                  <th>压力值解释</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item,index) in nowData.transitionAltitudeList" :key="index">
                  <td>
                    <el-input v-model="item.transitionVerticalDistance" placeholder="请输入"></el-input>
                  </td>
                  <td>
                    <el-input v-model="item.transitionVerticalDistanceF" placeholder="请输入"></el-input>
                  </td>
                  <td>
                    <el-select v-model="item.type" placeholder="请选择">
                      <el-option
                        v-for="item in TransitionAltitudeEntityRules.CodeTransitionAltitudeType.domainValueExEntityList"
                        :key="item.localCode"
                        :label="item.localCode"
                        :value="item.domainName"
                      ></el-option>
                    </el-select>
                  </td>
                  <td>
                    <el-select v-model="item.verticalDistanceReference">
                      <el-option
                        v-for="item in TransitionAltitudeEntityRules.CodeVerticalReferenceType.domainValueExEntityList"
                        :key="item.localCode"
                        :label="item.localCode"
                        :value="item.domainName"
                      ></el-option>
                    </el-select>
                  </td>
                  <td>
                    <el-input v-model="item.pressure"></el-input>
                  </td>
                  <td>
                    <el-select v-model="item.pressureUom">
                      <el-option
                        v-for="item in TransitionAltitudeEntityRules.UomPressureType.domainValueExEntityList"
                        :key="item.localCode"
                        :label="item.localCode"
                        :value="item.domainName"
                      ></el-option>
                    </el-select>
                  </td>
                  <td>
                    <el-select v-model="item.pressureInterpretation">
                      <el-option
                        v-for="item in TransitionAltitudeEntityRules.CodeValueInterpretationType.domainValueExEntityList"
                        :key="item.localCode"
                        :label="item.localCode"
                        :value="item.domainName"
                      ></el-option>
                    </el-select>
                  </td>
                  <td
                    style="color:#409EFF;cursor: pointer;"
                    @click="deleteTransitionAltitudeEntity(index)"
                  >删除</td>
                </tr>
              </tbody>
            </table>
            <img
              style="margin:0 auto;width:30px;height:30px;"
              src="../../../static/img/add.png"
              alt
              @click="addTransitionAltitudeEntity"
            />
          </el-form>
        </el-collapse-item>
      </el-collapse>

Answer 1

把过渡层信息放到遍历里面去

Answer 2

<div ref='app'>
    <div v-for='item in value' :key='item' :ref="'div' + item">{{item}}</div>
</div>

value: [1,2,3,4]

mounted() {
    let div = document.createElement('div')
    div.innerHTML = 'inner'
    this.$refs.app.insertBefore(div, this.$refs.div4[0])
}

codepen栗子

Answer 3

我想到的是这种,看是否可行

    <div v-for="item in [1, 2, 3, 4]" :key="item">

      <div>
        <span v-if="item === 4">inner</span>
      </div>
      <div>
        <span>{{ item }}</span>
      </div>

    </div>