2020-12-15 vue表单的el-form-item循环验证绑定数据问题

先上代码:

.........
<div class="dialogCheckbox">
        <el-form
          ref="dialogCheckbox"
          :model="dialogCheckbox"
          label-width="200px"
          label-position="left"
          :rules="dialogCheckRules"
        >
          <el-form-item label="选项名称(可不写)" prop="label">
            <el-input v-model="dialogCheckbox.label"></el-input>
          </el-form-item>
          <el-form-item
            label="多选框名称(可不写)"
            v-for="(item, index) in dialogCheckbox.nameArr"
            :key="index"
            :prop="'nameArr.' + index + ('.name' + index)"
            :rules="dialogCheckRules['name' + index]"
          >
            <!-- :prop="'name' + index" -->

            <!-- <el-form-item
            label="多选框名称(可不写)"
            v-for="(item, index) in dialogCheckbox.nameArr"
            :key="index"            
            :prop="dialogCheckbox.nameArr[index].name"
          > -->
            <el-input v-model="item['name' + index]"></el-input>
          </el-form-item>
        </el-form>
      </div>

数据格式:

...........
dialogCheckbox: {
        label: "",
        nameArr: [
          // {
          //   name0: "",
          //   name:"name0"
          // }
        ],
      },
      dialogCheckRules: {
        label: [{ required: true, message: "请输入选项名称", trigger: "blur" }],
        // name0: [
        //   { required: true, message: '请输入多选框名称', trigger: 'blur' },
        // ],
      },

在对其中的标签<el-form-item>进行for循环的时候,需要动态添加prop和rule,其中特别注意的是prop内部的写法

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容