vue----动态表单验证

vue+element 动态表单验证

公司最近的项目有个添加动态表单的需求，总结一下我在表单验证上遇到的一些坑。

 如图是功能的需求，这个功能挺好实现的，但是表单验证真是耗费了我一些功夫。

vue+element在表单验证上有一些限制，必须依照element示例的格式才能验证通过。

附上代码：

<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
    <div v-for="(domain, index) in dynamicValidateForm.list">
      <el-form-item label="" style="margin-left: -70px">
        <el-select v-model="dynamicValidateForm.list[index].organizer.positionId" @change="Positon($event)">
          <el-option v-for="item in positionList" :key="item.id" :label="item.name" :value="item.id" :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="margin-left: -29px" label="人数" :prop="'list.' + index + '.organizer.number'" :rules="{ required: true, message: '请输入人数', trigger: 'blur' }">
        <el-input v-model="domain.organizer.number" placeholder="人数"></el-input>
      </el-form-item>
      <el-form-item label="直属下级" v-if="dynamicValidateForm.list[index].organizer.positionId !== 1">
        <el-select v-model="dynamicValidateForm.list[index].organizer.parentId">
          <el-option v-for="item in positionList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <span style="margin-left: 30px">任务</span>
      <span v-for="(itm, i) in dynamicValidateForm.list[index].dutyId" :key="i">
        <el-form-item label="" style="width: 100px" id="ren" :prop="'list.' + index + '.dutyId.' + i + '.dutyid'" :rules="{ required: true, message: '请选择任务', trigger: 'change' }">
          <el-select v-model="dynamicValidateForm.list[index].dutyId[i].dutyid">
            <el-option v-for="item in dutyList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </span>
      <span class="add" @click="addWork(index)">增加任务+</span>
    </div>
    <p class="addLevel" @click="addLevel()">＋增加职位</p>
  </el-form>

:prop和:rulues还有v-model里面的字段必须是一一对应的，不然会一直验证不通过。

我害怕验证不通过，选择在行内验证

dynamicValidateForm: {
        //必须将数组放到表单对象里，不然会报错
        list: [
          {
            organizer: {
              positionId: '',
              parentId: '',
              number: '',
            },
            dutyId: [
              {
                dutyid: '',
              },
            ],
          },
        ],
      },