vue3，双层循环下的动态验证

最新推荐文章于 2024-06-30 12:46:56 发布

它经不起推敲的

最新推荐文章于 2024-06-30 12:46:56 发布

阅读量95

点赞数 1

文章标签：前端 vue.js elementui

本文链接：https://blog.csdn.net/m0_46365130/article/details/140023598

版权

         <template v-for="(element, index) in form.list" :key="element.seqNo">
              <el-form-item
                :label="'字段类型'"
                :prop="`list.${index}.fieldType`"
                :rules="rules.fieldType"
                v-if="
                  ![5, 6, 7, 8, 9].includes(element.fieldType) &&
                  element.fieldFixedFlag === 2
                "
              >
                <el-select
                  v-model="element.fieldType"
                  placeholder="请选择字段类型"
                  style="width: 340px"
                  @change="changeType($event, element)"
                >
                  <el-option label="输入型(最多输入100字)" :value="1" />
                  <el-option label="区间值（≥0&≤3000）" :value="13" />
                  <el-option label="单选型" :value="2" />
                  <el-option label="多选型" :value="3" />
                  <el-option label="日期（年月日）" :value="4" />
                  <el-option label="图片" :value="10" />
                  <el-option label="时间（时分秒）" :value="11" />
                  <el-option label="时间（年月日时分秒）" :value="12" />
                </el-select>
              </el-form-item>
              <template v-if="[2, 3].includes(element.fieldType)">
                <el-form-item
                  :label="`选项${optionsIdx + 1}`"
                  v-for="(item, optionsIdx) in element.optionsList"
                  :key="item.code"
                  :prop="`list.${index}.optionsList.${optionsIdx}.msg`"
                  :rules="rules.msg"
                >
                  <el-input
                    v-if="element.fieldFixedFlag === 2"
                    v-model="item.msg"
                    maxlength="100"
                    placeholder="请输入"
                    show-word-limit
                    style="width: 340px"
                  />
                </el-form-item>
              </template>

 const rules = reactive<FormRules>({
    fieldType: [
      { required: true, message: '请选择字段类型', trigger: 'change' },
    ],
    msg: [{ required: true, message: '请输入选项内容', trigger: 'change' }],
  });