美文网首页
ivew 动态新增 input prop校验

ivew 动态新增 input prop校验

作者: 沐深 | 来源:发表于2021-01-03 16:26 被阅读0次

有这样的需求如下图:
1.下拉选择select 选择,
2.新增一组 input提交选项

image.png

新增input代码如下(只罗列了前两项):

 <!-- 新增园区 -->
<div v-for="(item, index) in formData.areaList" v-if='formData.areaList.length >=1'>
          <div class="form-line">
            <FormItem label="联系人" :prop="'areaList.' + index + '.contactor'" :rules='rules.contactor'>
              <Input v-model="item.contactor" placeholder="请输入联系人" clearable :style="{width: '100%'}">
              </Input>
            </FormItem>
            <FormItem label="联系电话" :prop="'areaList.' + index + '.contactTel'" :rules='rules.contactTel'>
              <Input v-model="item.contactTel" placeholder="请输入联系电话" clearable :style="{width: '100%'}">
              </Input>
            </FormItem>
          </div>
</div>

prop这样写

 :prop = areaList.' + index + '.contactor
总结 : 便利对象 + . + index + . + key

需要注意的点

1. prop现在是变量 前面加:
2.便利的数组对象(areaList), 要在需要最后提交的formData里
3.单独在新增的FormItem 加rules,比如 :rules='rules.contactor'
 rules: {
        contactor: [{
          required: true,
          message: '请输入联系人',
          trigger: 'blur'
        }],
        contactTel: [{
          required: true,
          message: '请输入联系电话',
          trigger: 'blur'
        },
4.新增的数组里需要加入 对应的key

如下:

   let o = {
        contactTel: '',
        contactor: ''
      }
      this.formData.areaList.push(o)

相关文章

网友评论

      本文标题:ivew 动态新增 input prop校验

      本文链接:https://www.haomeiwen.com/subject/uvouoktx.html