vue:动态添加删除el-form-item并做rules校验

Posted 2023-03-01

参考技术A 把rules直接写在el-form-item标签里面 同时要注意prop的写法 写你遍历的那个数组名+下标+校验的字段
此处如果发现不生效 检查下你的prop里面的数组是不是写错了 不能写ruleForm.billingBindMeals 而应该直接写billingBindMeals

web前端-Vue动态显示隐藏表单el-form-item

给每项表单项添加一个自己的id名，并用v-model绑定相对应的数据，利用v-if根据上一个表单项的数据值来进行显示或隐藏

        <!-- 类别展示隐藏 -->
        <el-form-item id="classShowOrHide" v-model="showClass" v-if="showClass==true" label="类别类型" prop="classType">
             <el-select v-model="form.classType" clearable style="width:380px" placeholder="请选择">
                 <el-option
                     v-for="dict in classList"
                     :key="dict.dictValue"
                     :label="dict.dictLabel"
                     :value="dict.dictValue"
                 ></el-option>
             </el-select>
        </el-form-item>

定义是否展示表单的变量；根据v-model绑定是否展示隐藏

export default 
  name: "Class",
  components: 
  ,
  data() 
    return 
      // 类别是否展示
      showClass: true,
   
,


methods: 
    //显示类别
    openClass() 
        //是否展示班次类型；开班展示，结束隐藏
        this.showClass = true;