循环el-from添加验证，一个el-from-item控制两个/多个验证参数

MADAO123_

已于 2023-07-13 09:02:26 修改

阅读量855

点赞数

文章标签： vue.js elementui javascript

于 2023-07-13 08:51:55 首次发布

本文链接：https://blog.csdn.net/MADAO123_/article/details/131694263

版权

需求动态添加广告位，每个广告位都需要验证表单，

<template>
  <div class="mg-t-20 pos-re">
    <div class="ad_content">
      <div class="ad_item" v-for="(item, index) in adDataList" :key="item.id">
        <div>
          <div class="item_title">
            <span>广告{{ index + 1 }}</span>
            <span
              v-if="adDataList.length > 1"
              class="item_del"
              @click="delADitem(item.id)"
              ><i class="el-icon-delete"></i
            ></span>
          </div>
          <el-form
            :model="item"
            :ref="`ruleForm${index}`"
            :rules="rules"
            label-width="140px"
            :inline="false"
            size="normal"
          >
            <el-form-item label="广告位置：" prop="checkList">
              <el-checkbox-group v-model="item.checkList">
                <el-checkbox label="官网"></el-checkbox>
                <el-checkbox label="****"></el-checkbox>
                <el-checkbox label="小程序"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="广告内容：" prop="radio">
              <el-radio-group v-model="item.radio">
                <el-radio :label="3">图文（H5）</el-radio>
                <el-radio :label="6">视频</el-radio>
                <el-radio :label="9">课程</el-radio>
                <el-radio :label="2">小程序</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="图片："
              v-if="item.radio != 6"
              class="is-required"
            >
              <div style="display: flex">
                <el-form-item
                  label=""
                  v-if="
                    item.checkList.includes('官网') ||
                    item.checkList.includes('*****')
                  "
                  size="normal"
                  prop="pcImage"
                >
                  <div style="display: flex">
                    <span>PC: &nbsp;&nbsp;</span>
                    <uploadPicMore
                      :limit="1"
                      @uploadList="uploadListPC"
                    ></uploadPicMore>
                  </div>
                </el-form-item>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <el-form-item
                  label=""
                  v-if="item.checkList.includes('小程序')"
                  size="normal"
                  prop="wxImage"
                >
                  <div style="display: flex">
                    <span>小程序:&nbsp;&nbsp;</span>
                    <uploadPicMore
                      :limit="1"
                      @uploadList="uploadListWx"
                    ></uploadPicMore>
                  </div>
                </el-form-item>
              </div>
            </el-form-item>
            <el-form-item
              label="视频："
              size="normal"
              v-if="item.radio == 6"
              prop="video"
            >
              <uploadVideoLimit
                :limit="1"
                @uploadList="uploadListVideo($event, index)"
              ></uploadVideoLimit>
            </el-form-item>
            <el-form-item
              label="视频名称："
              size="normal"
              v-if="item.radio == 6"
            >
              <el-input
                style="width: 400px"
                v-if="!item.video"
                disabled
                placeholder=""
                size="normal"
                clearable
              ></el-input>
              <el-input
                style="width: 400px"
                v-else
                v-model="item.video.name"
                disabled
                placeholder=""
                size="normal"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="小程序：" size="normal" v-if="item.radio == 2">
              <span>********</span>
            </el-form-item>
            <el-form-item label="跳转地址：" v-if="item.radio == 3" prop="">
              <el-input
                style="width: 400px"
                placeholder=""
                size="normal"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item
              label="跳转地址："
              v-if="item.radio == 2"
              prop="toUrl"
            >
              <el-input
                style="width: 400px"
                placeholder=""
                size="normal"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item
              label="关联："
              size="normal"
              v-if="item.radio == 9"
              prop="glCourse"
            >
              <el-button
                type="primary"
                size="default"
                @click="openCourseDia(index)"
                >关联一级</el-button
              >
            </el-form-item>
            <el-form-item
              label="**名称："
              size="normal"
              v-if="item.radio == 9"
            >
              <el-input
                style="width: 400px"
                disabled
                v-model="item.glCourse"
                placeholder=""
                size="normal"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item
              :key="index"
              label="广告显示时间："
              prop="adTime"
              :rules="
                !item.notime ? [{ required: true, message: '请选择日期' }] : []
              "
            >
              <el-date-picker
                :disabled="item.notime"
                style="width: 400px"
                v-model="item.adTime"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
              &nbsp;&nbsp;
              <el-checkbox v-model="item.notime">不限</el-checkbox>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div v-if="adDataList.length != 5" class="addADItem" @click="addADItem">
        <i class="el-icon-plus"></i>添加
      </div>
      <div class="footer_en">
        <el-button size="default">取消</el-button>
        <el-button type="primary" @click="enterAddAD" size="default"
          >确认</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import uploadPicMore from "../../components/uploadPicMore";
import uploadVideoLimit from "../../components/uploadVideoLimit";
import $Api from "@/api";
export default {
  name: "Advertisement",
  components: {
    uploadPicMore,
    uploadVideoLimit,
  },
  data() {
    return {
      courseAdDialog: false,
      adDataList: [
        {
          checkList: ["官网"],
          video: "",
          radio: 3,
          pcImage: "",
          wxImage: "",
          videoUrl: "",
          adTime: null,
          notime: false,
          glCourse: "",
          toUrl: "",
          file: "",
          id: Date.now(),
        },
      ],
      rules: {
        checkList: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个位置",
            trigger: "change",
          },
        ],
        radio: [{ required: true, message: "请选择内容", trigger: "change" }],
        pcImage: [
          { required: true, message: "请上传PC图片", trigger: "change" },
        ],
        wxImage: [
          { required: true, message: "请上传小程序图片", trigger: "change" },
        ],
        toUrl: [{ required: true, message: "请填写跳转地址", trigger: "blur" }],
        video: [{ required: true, message: "请上传视频", trigger: "change" }],
      },
    };
  },

  mounted() {},

  methods: {
    // 点击确定添加广广告
    enterAddAD() {
      for (let i = 0; i < this.adDataList.length; i++) {
        this.$refs[`ruleForm${i}`][0].validate((valid) => {
          if (valid) {
            console.log("yanzheng 成功");
          } else {
          }
        });
      }
    },
    // 图片上传
    uploadListPC(file) {
      console.log("图片上传PC", file);
    },
    uploadListWx(file) {
      console.log("图片上传WX", file);
    },
    // 上传视频
    uploadListVideo(e, index) {
      this.$set(this.adDataList[index], "video", e[0]);
    },

    // 添加广告项
    addADItem() {
      if (this.adDataList.length < 5) {
        this.adDataList.push({
          checkList: ["官网"],
          radio: 3,
          pcImage: "",
          videoUrl: "",
          adTime: null,
          notime: false,
          glCourse: "",
          toUrl: "",
          id: Date.now(),
        });
      }
    },
    // 删除广告项
    delADitem(id) {
      this.adDataList.splice(
        this.adDataList.findIndex((i) => i.id == id),
        1
      );
    },
 
    },

  },
  //
};
</script>

 <el-form-item
              label="图片："
              v-if="item.radio != 6"
              class="is-required"
            >
              <div style="display: flex">
                <el-form-item
                  label=""
                  v-if="
                    item.checkList.includes('***') ||
                    item.checkList.includes('*****')
                  "
                  size="normal"
                  prop="pcImage"
                >
                  <div style="display: flex">
                    <span>PC: &nbsp;&nbsp;</span>
                    <uploadPicMore
                      :limit="1"
                      @uploadList="uploadListPC"
                    ></uploadPicMore>
                  </div>
                </el-form-item>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <el-form-item
                  label=""
                  v-if="item.checkList.includes('小程序')"
                  size="normal"
                  prop="wxImage"
                >
                  <div style="display: flex">
                    <span>小程序:&nbsp;&nbsp;</span>
                    <uploadPicMore
                      :limit="1"
                      @uploadList="uploadListWx"
                    ></uploadPicMore>
                  </div>
                </el-form-item>
              </div>
            </el-form-item>