使用element el-form组件时，发现表单的第一项没有计入，请问是怎么回事？

Question

问题描述

使用element el-form组件时，发现表单的第一项没有计入；用vue-tools查看时，el-form里有10个item，但是长度却为9

问题出现的环境背景及自己尝试过哪些方法

出现的背景是绑定了rules,model，目前我的处理方式是加了一个不显示的空el-form-item

相关代码

         <el-form v-if="dialogRadio==1" :model="replyForm" v-loading="listLoading">
          <el-form-item>
            <el-input v-model="replyForm.reply"  type="textarea" resize="none" :rows="4" ></el-input>
          </el-form-item>
        </el-form>
          <!--*********处理一个小问题
              表单第一项没有到rules里，所以添加一个空项************************-->
        <el-form v-else  :model="demandForm"  ref="demandForm" label-width="130px" :rules="rules" v-loading="listLoading" status-icon>
          <el-form-item v-if="false">
            <el-input type="hidden"></el-input>
          </el-form-item>
          <el-form-item label="联系单位" prop="companyName" style="width: 70%">
            <el-input v-model="demandForm.companyName"  maxlength="30"></el-input>
          </el-form-item>
          <el-form-item label="联系人" prop="contacts" style="width: 45%; display: inline-block">
            <el-input v-model="demandForm.contacts"  maxlength="30"></el-input>
          </el-form-item>
          <el-form-item label="手机/固话" prop="mobile" style="width: 45%; display: inline-block" >
            <el-input v-model="demandForm.mobile"  maxlength="30"></el-input>
          </el-form-item>
          <el-form-item label="需求描述" prop="description">
            <el-input v-model="demandForm.description" :rows="3" resize="none" type="textarea" maxlength="1000"></el-input>
          </el-form-item>
          <el-form-item label="项目名称" prop="projectName" style="width: 70%" >
            <el-input v-model="demandForm.projectName" maxlength="30"></el-input>
          </el-form-item>
          <el-form-item label="交付类型" prop="putTypeArr">
            <el-checkbox-group v-model="demandForm.putTypeArr" >
              <el-checkbox label="1">项目方案</el-checkbox>
              <el-checkbox label="2">配置清单</el-checkbox>
              <el-checkbox label="3">设计图纸</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="交付时间" prop="expectTime" style="width: 45%; display: inline-block">
            <el-input v-model="demandForm.expectTime"  maxlength="30"></el-input>
          </el-form-item>
          <el-form-item label="项目费用" prop="budget" style="width: 45%; display: inline-block" >
            <el-input v-model="demandForm.budget"   maxlength="9" type="number"></el-input>
          </el-form-item>
          <el-form-item label="客服联系人" prop="serviceName" style="width: 45%; display: inline-block">
            <el-input v-model="demandForm.serviceName"  maxlength="30"></el-input>
          </el-form-item>
          <el-form-item label="客服联系手机" prop="serviceMobile" style="width: 45%; display: inline-block" >
            <el-input v-model="demandForm.serviceMobile"></el-input>
          </el-form-item>
        </el-form>

你期待的结果是什么？实际看到的错误信息又是什么？

如果我把type=hidden这项去掉的话，‘联系单位’这一项是没有被包含在el-form里面的，导致的结果是rules对这一项没有用；
目前没有发现其他小伙伴有这个问题。代码如果有错误的话还请小伙伴提出来。

Answer 1

我看你form 用了 v-if 和 v-else。切的时候 规则有随着变化吗，是不是 v-if 的时候就没有联系单位这个规则

Answer 2

这个问题是v-if会高效的复用组件，给需要独立渲染的组件加key可解决。

https://cn.vuejs.org/v2/guide...