element表单嵌套检验+动态添加_element动态添加表单

在写表单的时候，容易碰到这种嵌套表单的数据校验，并且这种表单是动态添加的，网上大部分的做法是表单套表单，实际上只需要一个表单就可以了。
为了方便观看，这里只列举了两条数据

多级表单嵌套校验

  <el-form
      ref="ruleFormRef"
      :model="ruleForm.FormTable"
      :rules="rules"
      label-width="80px"
      class="demo-ruleForm"
      label-position="left"
      :size="formSize"
      status-icon
      >

            <div class="addFrom">
                <el-button @click="addGoodsInfo"><el-icon><Plus /></el-icon>添加</el-button>
                 <div class="addFrom_box" v-for="(item,index) in ruleForm.FormTable.goodsDetail" :key="index">
                    <!-- 嵌套检验 -->
                    <el-form-item label="商品编号" 
                    :prop="`goodsDetail.`+index+`.name`"
                    :rules="[{ required: true, message: '请输入商品编号', trigger: 'blur' }]"
                    >
                    <el-form-item label="商品数量" 
                    :prop="`goodsDetail.`+index+`.goodsNum`"  
                    :rules="[{ required: true, message: '请输入商品数量', trigger: 'blur' }]">
                    <el-input-number :min="1" :max="10" v-model="item.goodsNum" placeholder="请输入" />
                    </el-form-item>
                    
                    <el-input clearable v-model="item.name" placeholder="请输入商品编号" />
                    </el-form-item>
                 </div>
            </div>

  </el-form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

数据

// 为了演示嵌套校验，这里将列表数据嵌套在对象内部
const ruleForm = reactive({
    FormTable:{
        name: 'fanction',
        // 嵌套的列表数据
        goodsDetail : [
            {id:null,name:null,goodsNum:null,store:null}
        ]
    }
})
1
2
3
4
5
6
7
8
9
10

此处的数据里是一个对象内套了一个数组对象，正常情况下，校验是通过prop对module里面的数据进行校验，但此处是数组，数据在数组内部，所以用一般的prop指定数据名是校验不了的，这里用的是

:prop=“goodsDetail.+index+.name”
你也可以用模板字符串

只需要在prop中指定到当前数据在module里的位置即可。此处的goodsDetail就是v-for中ruleForm.FormTable.goodsDetail的最后面一位，向下寻找，goodsDetail[index].name就是当前的数据，只不过这里改成了xxx.xxx.xxx的链式写法。

校验规则写在el-form-item上面：

:rules=“[{ required: true, message: ‘请输入商品编号’, trigger: ‘blur’ }]”

动态添加，只需要给数组末尾添加一个空对象即可。

// 添加按钮
const addGoodsInfo = () => {
    ruleForm.FormTable.goodsDetail.push({id:null,name:null,goodsNum:null,store:null})
}
1
2
3
4

动态删除，给当前条添加一个点击事件，找到当前条删除。

// 删除按钮
const deleteGodos = (index : number) => {
   console.log(index);
   ruleForm.FormTable.goodsDetail.splice(index,1)
}
1
2
3
4
5