vue使用element-ui动态el-form中动态el-form-item如何校验

Question

问题遇到的现象和发生背景

用代码块功能插入代码，请勿粘贴截图

 <el-form class="form" v-for="(groups, index) in relationGroupList" :key="index" :model="groups" :inline="true" ref="form">
          <el-form-item
            style="width: 100%"
            v-for="(item, subIndex) in groups.value"
            :key="`${subIndex}`"
            :prop="`value[${subIndex}]`"
            :rules="rules"
          >
            <!-- 属性 -->
            <el-select v-model="item.key" placeholder="请选择属性" style="width: 150px" filterable>
              <el-option v-for="(item, index) in prop.propertyList" :key="index" :label="item.property_name + ' - ' + item.property_desc" :value="item.property_name"></el-option>
            </el-select>
            <!-- 关系 -->
            <el-select v-model="item.operator" placeholder="请选择条件关系" style="width: 150px;  margin-left: 10px;">
              <el-option v-for="(item, index) in commonMap.operator_list" :key="index" :label="item.text" :value="operatorMap[item.id]"></el-option>
            </el-select>
           </el-form-item>
</el-form>


data格式如下：
relationGroupList: [  
       {
          id: Math.random(),
          value: [
            {
              key: '',
              operator: '',
              value: ''
            }
          ]
        }
],

我想要达到的结果

请问一下，elemtn-ui，这种动态el-form中又有动态el-form-item，且el-form-item有多个组件的情况如何校验呢？

Answer 1

下拉框 选项值 动态校验，可以参考

elementUI动态添加表单项并添加验证_福州王宝强的博客-CSDN博客_element动态添加表单并验证 elementUI动态添加表单项并添加验证在使用elementUI动态添加表单项并添加验证的时候踩了一些坑，在此记录一下首先效果图：代码：<el-form :label-position="labelPosition" :ref="form" :model="form" label-width="120px" :inline="true" style="overflow: hidde... https://blog.csdn.net/a932946893/article/details/100042689