Element动态多表单验证

已于 2023-05-11 15:43:55 修改
阅读量427 收藏
点赞数
文章标签： javascript 前端 elementui
于 2023-05-11 15:37:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45778558/article/details/130622400
版权

Element动态多表单验证

需求

表单可以进行增加删除操作 需要进行表单校验
在这里插入图片描述

思路

每一块作为单独的一个表单组件 每一个表单的规则采用动态规则 规则的数据结构 需要与 数据的数据结构保持一致
eg:`

模板：<el-form-item
          label="业务因子"
          prop="workFactors.factors"
        >
          <el-select
            v-model="correlationForms.workFactors.factors"
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="item in businessFactorsList"
              :key="item.ID"
              :label="item.Name"
              :value="item.ID"
            >
            </el-option>
          </el-select>
        </el-form-item>

规则：   // 业务因子
        workFactors: {
          factors: [// 业务因子
            {
              required: true, message: '请选择业务因子', trigger: 'change'

            }
          ],
          ruleChar: [// 运算符号
            {
              required: true, message: '请选择运算符号', trigger: 'change'

            }
          ],
          value: [// 指标值
            {
              required: true, message: '请输入指标值', trigger: 'blur'

            }
          ]
        },

数据结构

completionRule: // 去除数据来源
        {
          isUse: '',
          ruleText: [
            {
              dataFrom: '',
              dateScope: [],
              alarm: ''
            }
          ]
        },

实现

1.父组件：将每一块作为单独的表单引进来


   <div
      v-if="resourceAdd.ruleType==='单值预测'"
      key="single"
    >
      <!-- 单值 -->
      <RemoveRule
        ref="removeRuleRef"
        :remove-rule="removeRule"
      />
      <div class="box-space"></div>
      <CompletionRule
        ref="completionRuleRef"
        :completion-rule="completionRule"
      />
      <div class="box-space"></div>
      <MarketingMark
        ref="marketingMarkRef"
        :marketing-mark="marketingMark"
      />
      <div class="box-space"></div>
      <HolidayMark
        ref="holidayMarkRef"
        :holiday-mark="holidayMark"
      />
    </div>

2.子组件 具体的表单 子组件的表单值应由父组件传入 通过函数返回 在父组件中进行调用 拿到修改后的表单值

<template>
  <el-form
    ref="holidayMarkFormRef"
    :inline="true"
    :model="holidayMarks"

    class="demo-form-inline inms-web-form"
    size="small"
    label-width="100px"
  >
    <div class="box-space"></div>
    <div class="box-single">
      <div class="inms-card-bg">
        <div class="inms-innerHeader">
          节假日标识

          <el-switch
            v-model="holidayMarks.isUse"
            active-value="1"
            inactive-value="0"
          ></el-switch>
        </div>
      </div>

      <div
        class="ml30"
        ref="holidayRef"
      >
        <!-- 遮罩层 用来达到只读效果 -->
        <div
          class="box-mask"
          :style="{height:holidayHeight+'px'}"
        ></div>

        <p class="ml10">
          <el-button
            type="primary"
            @click="addHolidayList"
          >
            添加节假日
          </el-button>
        </p>
        <p
          style="position:relative"
          v-for="(o,index) in holidayMarks.ruleText"

          :key="index"
        >
          <el-form-item
            label="节假日名称"
            :prop="'ruleText.'+ index +'.markName'"
            :rules="{
              required: holidayMarks.isUse==='0'?false:true, message: '请输入节假日名称', trigger: 'blur'
            }"
          >
            <el-input
              v-model="o.markName"
              placeholder="请输入搜索内容"
              clearable
            ></el-input>
          </el-form-item>

          <el-form-item
            label="节假日日期"

            :prop="'ruleText.'+ index +'.dateScope'"
            :rules="{
              required: holidayMarks.isUse==='0'?false:true, message: '请选择节假日日期', trigger: 'change'
            }"
          >
            <el-date-picker
              v-model="o.dateScope"
              type="daterange"
              style="width: 80%;"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              size="mini"
            >
            </el-date-picker>
          </el-form-item>

          <el-button
            type="primary"
            style="position:absolute;right:100px"
            @click="()=>delHoliday(index)"
          >
            删除
          </el-button>
        </p>
      </div>
    </div>
  </el-form>
</template>

<script>
export default {
  props: {

    holidayMark: {
      type: Object,
      default: null
    }
  },
  computed: {

  },
  data () {
    return {

      holidayHeight: 0, // 节假日标识遮罩层高度
      holidayMarks: {
        isUse: '',
        ruleText: [{ markName: '', dateScope: [] }]
      },

      // 节假日标识
      holidayList: [
        {
          Name: '1',
          time: []
        }
      ]

    }
  },
  methods: {

    // 节假日添加节假日
    addHolidayList () {
      this.$set(this.holidayMarks.ruleText, this.holidayMarks.ruleText.length, { markName: '', dateScope: [] })
    },
    // 营销活动删除活动
    delHoliday (index) {
      this.$delete(this.holidayMarks.ruleText, index)
    },
    // 清除表单验证 当开关关闭时候 （指定表单清除）
    clearFormItem (dom, form, ruleName) {
      const clearArr = []
      form.forEach((item, index) => {
        Object.keys(item).map((name, idx) => {
          this.$set(clearArr, clearArr.length, ruleName + '.' + index + '.' + name)
        })
      })
      // 获取要清除的数组
      dom.clearValidate(clearArr)
    },
    getData () {
      // 循环遍历holidayMarks.ruleText 处理dateScope
      const obj = JSON.parse(JSON.stringify(this.holidayMarks))
      obj.ruleText.map((item, index) => {
        if (item.dateScope) {
          item.dateScope = item.dateScope.join(',')
        }
      })
      return obj
    }
  },
  watch: {
    // 监听传进来的表单值 拿中间变量接收
    holidayMark: {
      deep: true,
      immediate: true,
      handler (val, oldVal) {
        // 处理其中的dateScope 将其转化为数组
        const obj = JSON.parse(JSON.stringify(val))
        obj.ruleText.map((item, index) => {
          if (item.dateScope) {
            item.dateScope = item.dateScope.split(',')
          }
        })
        this.holidayMarks = obj || {
          isUse: '',
          ruleText: [{ markName: '', dateScope: [] }]
        }
      }
    },
    // 监听节假日活动的开关变化 用来获取此节点高度  赋给遮罩层高度 达到只读效果
    'holidayMarks.isUse': {
      deep: true,
      immediate: true,
      handler (val, oldVal) {
        if (val === '0') { // if val==='false' disabled=true 显示遮罩层
          this.$nextTick(() => {
            this.holidayHeight = this.$refs.holidayRef.offsetHeight
            // this.clearFormItem(this.$refs.holidayMarkFormRef, this.holidayMarks.ruleText, 'ruleText')
            // this.$refs.holidayMarkFormRef.resetFields()
          })
        } else {
          this.holidayHeight = 0
        }
      }
    }

  }
}
</script>
<style scoped lang="scss">
  .ml10{
    margin-left:10px
  }
  .ml30{
    margin-left:30px;
  }
.box-single{
  background-color: #fff;
  margin:0px 12px;
}
.box-space{
  background-color: #f2f2f2;
  box-sizing: border-box;
  margin:0px 12px;
  width:100%;
  height:20px;
}
.box-mask{
  width:100%;
  height:10px;
  position:absolute;
  z-index:1;
  background-color: rgba(255,255,255,0.3);
}
</style>

3.点击提交时 需要对每个表单进行校验（使用promise.all等待表单校验结果） 如果校验通过 将表单的数据都取出来 放到一个对象里带给后端

 // 点击保存
    submit () {
      // 当前表单校验
      const addform = new Promise((resolve, reject) => {
        this.$refs.addFormRef.validate((valid) => {
          if (valid) {
            resolve(true)
          }
        })
      })
      // 表单缺失数据补齐规则校验 removeRuleRef
      const removeRuleform = this.$refs.removeRuleRef && new Promise((resolve, reject) => {
        this.$refs.removeRuleRef.$refs.removeRuleFormRef.validate((valid) => {
          if (valid) {
            resolve(true)
          }
        })
      })

      // 单值表单去除数据校验 completionRuleFormRef
      const completionRuleform = this.$refs.completionRuleRef && new Promise((resolve, reject) => {
        this.$refs.completionRuleRef.$refs.completionRuleFormRef.validate((valid) => {
          if (valid) {
            resolve(true)
          }
        })
      })
      // 单值表单营销活动验证
      const marketingMarkform = this.$refs.marketingMarkRef && new Promise((resolve, reject) => {
        this.$refs.marketingMarkRef.$refs.marketingMarkFormRef.validate((valid) => {
          if (valid) {
            resolve(true)
          }
        })
      })
      // 表单验证节假日
      const holidayMarkform = this.$refs.holidayMarkRef && new Promise((resolve, reject) => {
        this.$refs.holidayMarkRef.$refs.holidayMarkFormRef.validate((valid) => {
          if (valid) {
            resolve(true)
          }
        })
      })
      // 关联校验
      const correlationform = this.$refs.correlationRef && new Promise((resolve, reject) => {
        this.$refs.correlationRef.$refs.correlationFormRef.validate((valid) => {
          if (valid) {
            resolve(true)
          }
        })
      })

      // 判断选择结果
      switch (this.resourceAdd.ruleType) {
        case '单值预测': // 选择单值
        // 进行 当前与单值的表单校验
          Promise.all([addform, removeRuleform, completionRuleform, marketingMarkform, holidayMarkform]).then(() => {
            const removeRuleformData = this.$refs.removeRuleRef.getData()
            const completionRuleformData = this.$refs.completionRuleRef.getData()
            const marketingMarkformData = this.$refs.marketingMarkRef.getData()
            const holidayMarkformData = this.$refs.holidayMarkRef.getData()
            const queryObj = {}
            queryObj.ruleName = this.resourceAdd.ruleName
            queryObj.ruleType = this.resourceAdd.ruleType
            queryObj.isUse = this.resourceAdd.isUse
            queryObj.removeRule = removeRuleformData
            queryObj.completionRule = completionRuleformData
            queryObj.marketingMark = marketingMarkformData
            queryObj.holidayMark = holidayMarkformData

            if (this.intId) {
              // 修改
              queryObj.intId = this.intId
              queryObj.ruleCode = this.ruleCode

              this.updateRules(queryObj)
              this.back()
            } else {
              // 新增
              /*        queryObj.ruleName = this.resourceAdd.ruleName
              queryObj.ruleType = this.resourceAdd.ruleType
              queryObj.isUse = this.resourceAdd.isUse
              queryObj.removeRule = removeRuleformData
              queryObj.completionRule = completionRuleformData
              queryObj.marketingMark = marketingMarkformData
              queryObj.holidayMark = holidayMarkformData */
              this.PredictionRules(queryObj)
              this.back()
            }
          }).catch((message) => {
            this.Tip(message, 'error')
          })

          break
        case '关联预测': // 选择关联
          // 进行 当前与关联的表单校验
          Promise.all([addform, correlationform]).then(() => {
            const correlationformData = this.$refs.correlationRef.getData()
            const queryObj = {
              ...this.resourceAdd, // 当前表单
              ...correlationformData // 关联表单
            }
            if (this.intId) {
              // 修改

              queryObj.intId = this.intId
              queryObj.ruleCode = this.ruleCode

              this.updateRules(queryObj)
              this.back()
            } else {
              // 新增
              this.PredictionRules(queryObj)
              this.back()
            }
            //
            /*             const addFormData = this.$refs.addFrom.getData()
            const correlationformData = this.$refs.correlationform.getData()
            this.Tip({ ...addFormData, ...correlationformData }, 'success') */

            // const reqData = Object.assign(publicData, userData)
            // console.log(reqData)
          }).catch((message) => {
            this.Tip(message, 'error')
          })
          break
      }

完整代码

父组件：

<template>
  <div
    class="inms-web-box"
    style="padding:16px;box-sizing:border-box"
  >
    <div class="inms-container">
      <el-card
        class="inms-box-card"
        shadow="never"
      >
        <div slot="header">
          <el-link
            class="vm"
            @click="back"
            :underline="false"
          >
            <svg-icon
              class="f-12 mr-10"
              icon-class="back"
            />
          </el-link>
          <span class="card-header vm">
            容量预测规则>{{ intId?'修改':'新增' }}
          </span>
        </div>
      </el-card>
    </div>
    <div
      class="box-single"
      style="padding-top:20px"
    >
      <el-form
        ref="addFormRef"
        :inline="true"
        :model="resourceAdd"
        :rules="rules"
        class="demo-form-inline inms-web-form"
        size="small"
        label-width="100px"
      >
        <el-form-item
          label="规则名称"
          prop="ruleName"
        >
          <el-input
            v-model="resourceAdd.ruleName"
            placeholder="请输入搜索内容"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          label="规则类型"
          prop="ruleType"
        >
          <el-select
            :disabled="intId?true:false"
            v-model="resourceAdd.ruleType"
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="item in commandList"
              :key="item.ID"
              :label="item.Name"
              :value="item.ID"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="是否生效"

          style="width:'150px;"
        >
          <el-switch
            v-model="resourceAdd.isUse"
            active-value="1"
            inactive-value="0"
          ></el-switch>
        </el-form-item>
      </el-form>
    </div>
    <div class="box-space"></div>
    <div
      v-if="resourceAdd.ruleType==='单值预测'"
      key="single"
    >
      <!-- 单值 -->
      <RemoveRule
        ref="removeRuleRef"
        :remove-rule="removeRule"
      />
      <div class="box-space"></div>
      <CompletionRule
        ref="completionRuleRef"
        :completion-rule="completionRule"
      />
      <div class="box-space"></div>
      <MarketingMark
        ref="marketingMarkRef"
        :marketing-mark="marketingMark"
      />
      <div class="box-space"></div>
      <HolidayMark
        ref="holidayMarkRef"
        :holiday-mark="holidayMark"
      />
    </div>
    <div
      v-if="resourceAdd.ruleType==='关联预测'"
      key="correlation"
    >
      <Correlation
        ref="correlationRef"
        :rules="rules"
        :correlation-form="correlationForm"
      ></Correlation>
      <!-- 关联 -->
    </div>
    <div class="box-space"></div>
    <div
      class="box-single"
      style="display:flex;justify-content:center;align-items=center"
    >
      <p>
        <el-button
          size="big"
          style="margin-right:100px"
          @click="back"
        >
          取消
        </el-button>
        <el-button
          class="mr40"
          type="primary"
          size="big"
          @click="submit"
        >
          保存
        </el-button>
      </p>
    </div>
  </div>
</template>
<script>
import { addPredictionRules, RulesOne, updatePredictionRules } from '../../api/index.js'
import CompletionRule from './SingleValue/CompletionRule.vue'

import Correlation from './Correlation/Index.vue'
import HolidayMark from './SingleValue/Holiday.vue'

import MarketingMark from './SingleValue/Marketing.vue'
import RemoveRule from './SingleValue/RemoveRule.vue'
// prop绑定的类要与v-model绑定的一致
export default {
  components: {
    CompletionRule,
    MarketingMark,
    HolidayMark,
    RemoveRule,
    Correlation
  },
  data () {
    return {
      intId: '',
      ruleCode: '',
      resourceAdd: {
        ruleName: '',
        ruleType: '',
        isUse: ''
      },
      removeRule: { // 单值数据规则
        isUse: '',
        ruleText: ''
      },
      completionRule: // 去除数据来源
        {
          isUse: '',
          ruleText: [
            {
              dataFrom: '',
              dateScope: [],
              alarm: ''
            }
          ]
        },

      // 单值表单

      marketingMark: {
        isUse: '',
        ruleText: [{ markName: '', dateScope: [] }]
      },
      holidayMark: {
        isUse: '',
        ruleText: [{ markName: '', dateScope: [] }]
      },
      correlationForm: { // 关联表单
        workFactors: {
          factors: 'TPS',
          ruleChar: '',
          value: ''
        },
        forecastResults: {
          dateScope: [],
          value: '',
          rate: ''

        }

      },
      commandList: [
        {
          ID: '单值预测',
          Name: '单值预测'
        },
        {
          ID: '关联预测',
          Name: '关联预测'
        }
      ],
      rules: {
        ruleName: [ // 规则名称
          {
            required: true, message: '请输入规则名称', trigger: 'blur'
          }
        ],
        ruleType: [// 规则类型
          {
            required: true, message: '请选择规则类型', trigger: 'change'
          }
        ],

        // 关联
        // 业务因子
        workFactors: {
          factors: [// 业务因子
            {
              required: true, message: '请选择业务因子', trigger: 'change'

            }
          ],
          ruleChar: [// 运算符号
            {
              required: true, message: '请选择运算符号', trigger: 'change'

            }
          ],
          value: [// 指标值
            {
              required: true, message: '请输入指标值', trigger: 'blur'

            }
          ]
        },
        // 预测结果
        forecastResults: {
          dateScope: [// 未来影响范围
            {
              required: true, message: '请选择未来影响范围', trigger: 'change'

            }
          ],
          value: [// 预测值
            {
              required: true, message: '请选择预测值', trigger: 'change'

            }
          ],
          rate: [// 比率
            {
              required: true, message: '请选择预测值', trigger: 'blur'

            }
          ]
        }

      }

    }
  },
  created () {
    this.intId = this.$route.query.intId
    this.ruleCode = this.$route.query.ruleCode
  },
  mounted () {
    if (this.intId) {
      this.getRulesOne()
    }
  },
  methods: {
    back () {
      this.$router.push('/dcimPrivatenetwork/resourcecapacity')
    },
    // 提示
    Tip (message, type) {
      this.$message({
        message: message,
        type: type
      })
    },

    async PredictionRules (params) {
      try {
        const { data } = addPredictionRules(params)
      } catch {

      }
    },
    // 编辑时  获取表单值
    async getRulesOne () {
      try {
        const { data } = await RulesOne(Number(this.intId))

        // 拿到数据 赋值
        this.resourceAdd.ruleName = data.ruleName
        this.resourceAdd.ruleType = data.ruleType
        this.resourceAdd.isUse = data.isUse
        // 单值表单
        this.completionRule = data.completionRule
        this.holidayMark = data.holidayMark
        this.marketingMark = data.marketingMark || {
          isUse: '',
          ruleText: [{ markName: '', dateScope: [] }]
        }
        this.removeRule = data.removeRule
        // 关联表单

        this.correlationForm.forecastResults = data.forecastResults || {
          dateScope: [],
          value: '',
          rate: ''

        }
        this.correlationForm.workFactors = data.workFactors || {
          factors: 'TPS',
          ruleChar: '',
          value: ''
        }
      } catch {

      }
    },
    // 编辑接口
    async updateRules (params) {
      try {
        const { data } = await updatePredictionRules(params)
      } catch {

      }
    },
    // 点击保存
    submit () {
      // 当前表单校验
      const addform = new Promise((resolve, reject) => {
        this.$refs.addFormRef.validate((valid) => {
          if (valid) {
            resolve(true)
          }
        })
      })
      // 表单确实数据补齐规则校验 removeRuleRef
      const removeRuleform = this.$refs.removeRuleRef && new Promise((resolve, reject) => {
        this.$refs.removeRuleRef.$refs.removeRuleFormRef.validate((valid) => {
          if (valid) {
            resolve(true)
          }
        })
      })

      // 单值表单去除数据校验 completionRuleFormRef
      const completionRuleform = this.$refs.completionRuleRef && new Promise((resolve, reject) => {
        this.$refs.completionRuleRef.$refs.completionRuleFormRef.validate((valid) => {
          if (valid) {
            resolve(true)
          }
        })
      })
      // 单值表单营销活动验证
      const marketingMarkform = this.$refs.marketingMarkRef && new Promise((resolve, reject) => {
        this.$refs.marketingMarkRef.$refs.marketingMarkFormRef.validate((valid) => {
          if (valid) {
            resolve(true)
          }
        })
      })
      // 表单验证节假日
      const holidayMarkform = this.$refs.holidayMarkRef && new Promise((resolve, reject) => {
        this.$refs.holidayMarkRef.$refs.holidayMarkFormRef.validate((valid) => {
          if (valid) {
            resolve(true)
          }
        })
      })
      // 关联校验
      const correlationform = this.$refs.correlationRef && new Promise((resolve, reject) => {
        this.$refs.correlationRef.$refs.correlationFormRef.validate((valid) => {
          if (valid) {
            resolve(true)
          }
        })
      })

      // 判断选择结果
      switch (this.resourceAdd.ruleType) {
        case '单值预测': // 选择单值
        // 进行 当前与单值的表单校验
          Promise.all([addform, removeRuleform, completionRuleform, marketingMarkform, holidayMarkform]).then(() => {
            const removeRuleformData = this.$refs.removeRuleRef.getData()
            const completionRuleformData = this.$refs.completionRuleRef.getData()
            const marketingMarkformData = this.$refs.marketingMarkRef.getData()
            const holidayMarkformData = this.$refs.holidayMarkRef.getData()
            const queryObj = {}
            queryObj.ruleName = this.resourceAdd.ruleName
            queryObj.ruleType = this.resourceAdd.ruleType
            queryObj.isUse = this.resourceAdd.isUse
            queryObj.removeRule = removeRuleformData
            queryObj.completionRule = completionRuleformData
            queryObj.marketingMark = marketingMarkformData
            queryObj.holidayMark = holidayMarkformData

            if (this.intId) {
              // 修改
              queryObj.intId = this.intId
              queryObj.ruleCode = this.ruleCode

              this.updateRules(queryObj)
              this.back()
            } else {
              // 新增
              /*        queryObj.ruleName = this.resourceAdd.ruleName
              queryObj.ruleType = this.resourceAdd.ruleType
              queryObj.isUse = this.resourceAdd.isUse
              queryObj.removeRule = removeRuleformData
              queryObj.completionRule = completionRuleformData
              queryObj.marketingMark = marketingMarkformData
              queryObj.holidayMark = holidayMarkformData */
              this.PredictionRules(queryObj)
              this.back()
            }
          }).catch((message) => {
            this.Tip(message, 'error')
          })

          break
        case '关联预测': // 选择关联
          // 进行 当前与关联的表单校验
          Promise.all([addform, correlationform]).then(() => {
            const correlationformData = this.$refs.correlationRef.getData()
            const queryObj = {
              ...this.resourceAdd, // 当前表单
              ...correlationformData // 关联表单
            }
            if (this.intId) {
              // 修改

              queryObj.intId = this.intId
              queryObj.ruleCode = this.ruleCode

              this.updateRules(queryObj)
              this.back()
            } else {
              // 新增
              this.PredictionRules(queryObj)
              this.back()
            }
            //
            /*             const addFormData = this.$refs.addFrom.getData()
            const correlationformData = this.$refs.correlationform.getData()
            this.Tip({ ...addFormData, ...correlationformData }, 'success') */

            // const reqData = Object.assign(publicData, userData)
            // console.log(reqData)
          }).catch((message) => {
            this.Tip(message, 'error')
          })
          break
      }

    /*   this.$refs.addFrom.validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          this.Tip('失败提交', 'error')

          return false
        }
      }) */
    }
  },
  watch: {
    // 监听缺失数据补齐开关
    'resourceAdd.isUse': {
      deep: true,
      immediate: true,
      handler (val, oldVal) {
        if (val === '0') {
          this.$nextTick(() => {
            // this.$refs.addFormRef.resetFields()
          })
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.card-header {
  &::before{
  background:#009FFF
  }
}
.mr40{
  margin-right:40px
}
.box-single{
background-color: #fff;
margin:0px 12px;
}
.box-space{
  background-color: #f2f2f2;
  box-sizing: border-box;
  margin:0px 12px;
  width:100%;
  height:20px;
}
</style>
子组件示例
<template>
  <el-form
    ref="completionRuleFormRef"
    :inline="true"
    :model="completionRules"

    class="demo-form-inline inms-web-form"
    size="small"
    label-width="100px"
  >
    <div class="box-space">
    </div>
    <div class="box-single">
      <div class="inms-card-bg">
        <div class="inms-innerHeader">
          去除数据
          <el-switch
            v-model="completionRules.isUse"
            active-value="1"
            inactive-value="0"
          ></el-switch>
        </div>
      </div>

      <div
        class="ml30"
        ref="removeDataRef"
      >
        <div
          class="box-mask"
          :style="{height:removeDataHeight+'px'}"
        ></div>

        <p class="ml10">
          <el-button
            type="primary"
            @click="addRemoveDataRule"
          >
            添加规则
          </el-button>
        </p>

        <p
          style="position:relative"
          v-for="(o,index) in completionRules.ruleText"
          :key="index"
        >
          <el-form-item
            label="去除数据来源"
            :prop="'ruleText.'+ index +'.dataFrom'"
            :rules="{
              required: completionRules.isUse==='0'?false:true, message: '请选择去除数据来源', trigger:['change','blur']
            }"
          >
            <el-select
              v-model="o.dataFrom"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in removeDataList"
                :key="item.ID"
                :label="item.Name"
                :value="item.ID"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="扩容日期"
            :prop="'ruleText.'+ index +'.dateScope'"
            :rules="{
              required: completionRules.isUse==='0'?false:true, message: '请选择扩容日期', trigger: 'change'
            }"
            v-if="o.dataFrom==='扩容'"
          >
            <el-date-picker
              v-model="o.dateScope"
              type="daterange"
              style="width: 80%;"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              size="mini"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item
            label="关联告警"
            :prop="'ruleText.'+ index +'.alarm'"
            :rules="{
              required: completionRules.isUse==='0'?false:true, message: '请选择关联告警', trigger: 'change'
            }"

            v-if="o.dataFrom==='告警'"
          >
            <el-select
              v-model="o.alarm"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in relatedAlarmList"
                :key="item.ID"
                :label="item.Name"
                :value="item.ID"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="有效日期"
            :prop="'ruleText.'+ index +'.dateScope'"
            :rules="{
              required: completionRules.isUse==='0'?false:true, message: '请选择扩容日期', trigger: 'change'
            }"
            v-if="o.dataFrom==='告警'"
          >
            <el-date-picker
              v-model="o.dateScope"
              type="daterange"
              style="width: 80%;"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              size="mini"
            >
            </el-date-picker>
          </el-form-item>
          <el-button
            type="primary"
            style="position:absolute;right:100px"
            @click="()=>delRemoveDataRule(index)"
          >
            删除
          </el-button>
        </p>
      </div>
    </div>
  </el-form>
</template>

<script>
export default {
  props: {

    completionRule: {
      type: Object,
      default: null
    }
  },

  computed: {

  },
  data () {
    return {
      removeDataHeight: 0, // 去除数据遮罩层高度

      completionRules:
      {
        isUse: '',
        ruleText: [
          {
            dataFrom: '',
            dateScope: '',
            alarm: ''
          }
        ]
      },
      // 去除数据来源
      removeDataList: [
        {
          ID: '扩容',
          Name: '扩容'
        },
        {
          ID: '告警',
          Name: '故障'
        }
      ],
      // 关联告警
      relatedAlarmList: [
        {
          ID: '一级告警',
          Name: '一级告警'
        },
        {
          ID: '二级告警',
          Name: '二级告警'
        },
        {
          ID: '三级告警',
          Name: '三级告警'
        },
        {
          ID: '四级告警',
          Name: '四级告警'
        }
      ],
      // 去除数据添加规则
      removeDataRuleList: [
        {
          removeData: '0',
          dateRange: ''
        },
        {
          removeData: '1',
          dateRange: ''
        }
      ]

    }
  },
  methods: {

    // 去除数据添加规则
    addRemoveDataRule () {
      this.$set(this.completionRules.ruleText, this.completionRules.ruleText.length, {
        dataFrom: '',
        dateScope: [],
        alarm: ''
      })
    },
    // 去除数据删除规则
    delRemoveDataRule (index) {
      this.$delete(this.completionRules.ruleText, index)
    },
    // 清除表单验证 当开关关闭时候
    clearFormItem (dom, form, ruleName) {
      const clearArr = []
      form.forEach((item, index) => {
        Object.keys(item).map((name, idx) => {
          this.$set(clearArr, clearArr.length, ruleName + '.' + index + '.' + name)
        })
      })
      // 获取要清除的数组
      dom.clearValidate(clearArr)
    },
    getData () {
      // 循环遍历completionRules.ruleText 处理dateScope
      const obj = JSON.parse(JSON.stringify(this.completionRules))
      obj.ruleText.map((item, index) => {
        if (item.dateScope) {
          item.dateScope = item.dateScope.join(',')
        }
      })
      return obj
    }

  },
  watch: {
    // 监听传进来的表单值 拿中间变量接收
    completionRule: {
      deep: true,
      immediate: true,
      handler (val, oldVal) {
        // 处理其中的dateScope 将其转化为数组
        const obj = JSON.parse(JSON.stringify(val))
        obj.ruleText.map((item, index) => {
          if (item.dateScope) {
            item.dateScope = item.dateScope.split(',')
          }
        })
        this.completionRules = obj || {
          isUse: '',
          ruleText: [
            {
              dataFrom: '',
              dateScope: [],
              alarm: ''
            }
          ]
        }
      }
    },
    // 监听去除数据的开关变化 用来获取此节点高度  赋给遮罩层高度 达到只读效果
    'completionRules.isUse': {
      deep: true,
      immediate: true,
      handler (val, oldVal) {
        if (val === '0') {
          this.$nextTick(() => {
            this.removeDataHeight = this.$refs.removeDataRef.offsetHeight
            /* const clearArr = []
            this.singleForms.completionRule.ruleText.forEach((item, index) => {
              Object.keys(item).map((name, idx) => {
                this.$set(clearArr, clearArr.length, 'completionRule.ruleText.' + index + '.' + name)
              })
            })
            // 获取要清除的数组
            this.$refs.singleFormRef.clearValidate(clearArr) */
            // this.clearFormItem(this.$refs.completionRuleFormRef, this.completionRules.ruleText, 'ruleText')
          })
        } else {
          this.removeDataHeight = 0
        }
      }
    }

  }
}
</script>
<style scoped lang="scss">
  .ml10{
    margin-left:10px
  }
  .ml30{
    margin-left:30px;
  }
.box-single{
  background-color: #fff;
  margin:0px 12px;
}
.box-space{
  background-color: #f2f2f2;
  box-sizing: border-box;
  margin:0px 12px;
  width:100%;
  height:20px;
}
.box-mask{
  width:100%;
  height:10px;
  position:absolute;
  z-index:1;
  background-color: rgba(255,255,255,0.3);
}
</style>
流泪百香果
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决ElementUI动态表单校验验证不通过
chao的博客
08-11 1662
这里记录一下，写项目时遇到的一个问题：就是动态渲染的表单项，加验证规则后一直不通过！！！
记el-select选择触发校验不通过（单选/多选）
m0_46099649的博客
03-28 440
el-select选择触发校验不通过
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
10-17
主要介绍了Vue+elementUI的动态表单的校验(根据条件动态切换校验格式),本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
elementUI动态表单验证
preoccupied_的博客
04-23 695
【代码】elementUI动态表单验证。
element 动态表单校验
瘦瘦瘦大人的博客
11-17 816
element 动态表单校验
elementUI动态表单校验
u010994219的专栏
09-07 2472
动态表单校验的问题
ElementUI 实现动态表单数据校验（已解决）
热门推荐
qq_49002903的博客
07-26 1万+
日常问题记录：ElementUI 实现动态表单数据校验（已解决）
详解element-ui中表单验证的三种方式
10-16
主要介绍了详解element-ui中表单验证的三种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue+Element实现动态生成新表单并添加验证功能
10-16
主要介绍了Vue+Element实现动态生成新表单并添加验证功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue ~ element-ui 动态表单验证，支持添加和删除操作
07-27
Vue 基于element-ui 组件，el-form与el-table结合使用实现动态表单验证，支持添加和删除操作；支持身份证号码验证、手机号验证; 开箱即用，方便快速二开，节省开发成本
vue element动态渲染、移除表单并添加验证的实现
12-07
又接到新需求了吧~~ 背景 在一个大表单里，有可能... 动态新增的表单如何验证 动态表单怎么填写对应的 prop … 好吧，我当时也思考了一会，最后选择数组方式，动态渲染 代码实现讲解 利用数组，v-for 循环方式，可
解决vue+ element ui 表单验证有值但验证失败问题
10-15
主要介绍了vue+ element ui 表单验证有值但验证失败，本文通过实例代码给大家分享解决方案，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
elementUI表单验证之动态表单验证
to_prototy的博客
03-10 5652
有些需要自定义的校验规则可以作为变量写在data中，然后赋值给validator字段。elementUI 中 Form 组件提供了表单验证的功能，只需要通过。属性传入约定的验证规则，并将 Form-Item 的。（2）自定义验证规则（关键字：validator）属性设置为需校验的字段名即可。
element-ui动态表单和验证
weixin_43180359的博客
10-19 5677
在使用element-ui开发中，经常会用到对动态创建的表单进行字段验证，比如新增多个类似卡片的表单，里面的字段需要做验证，此时就要使用到动态表单验证，官方文档写的有示例，但是不够清晰。除了官方示例，还可以使用循环生成多个form实现该需求。 第一种官方示例：一个Form多项 下面以实际项目中的代码为例： <el-form ref="form" :model="form" :rules="rules" label-width="110px" size="small" style="width: 90%
element框架动态增减表单验证
CCC_chtt的博客
07-04 323
el-form动态添加删除表单验证
elementUI动态嵌套el-form表单校验
小绵杨
03-19 6926
前端项目开发过程中表单校验是非常常见的需求，elementUI的el-form组件也是支持配置rules属性来配置表单项的校验。 Form 组件允许你验证用户的输入是否符合规范，来帮助你找到和纠正错误。 Form 组件提供了表单验证的功能，只需为 rules 属性传入约定的验证规则，并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可。
使用element-ui动态表单做表单验证
qq_42155347的博客
01-19 220
官方给的demo // 表单 <el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :label="'域名' + index" :key="domain.key" :prop="'domains.' + index + '.value'" :rules="{ required: true, message: '域名不能为空', trigger: 'blur'
`“use strict“`在JavaScript中是什么？它背后的原理是什么？
最新发布
Jerry学长
05-27 1054
JavaScript的严格模式（strict mode）是ECMAScript 5引入的一项特性。如果你在脚本或函数的顶部声明 ，你就启用了严格模式： 当JavaScript引擎看到这个指令时，它将开始以一种特殊的模式解释代码。在这种模式下，当检测到某些可能导致潜在错误的编码实践时，会抛出错误。这就是严格模式背后的基本原理。考虑下面这个例子： 开发者可能因为强迫症而对齐数值字面量，但这样会无意中使变量 初始化为八进制字面量。在非严格模式下，这将被解释为值 （十进制）。然而，在严格模式下，这样的代码会抛出错
element-ui表单验证
10-17
element-ui提供了一套表单验证的方案，可以通过设置rules属性来实现。具体步骤如下： 1. 在表单元素上设置prop属性，该属性值为表单元素的字段名。 2. 在表单元素上设置rules属性，该属性值为一个数组，数组中每个元素都是一个验证规则对象。 3. 验证规则对象包含两个属性：validator和message。validator是一个函数，用于验证表单元素的值是否符合规则；message是一个字符串，用于在验证失败时显示错误信息。 例如，验证一个输入框中的值是否为数字： ``` <el-form-item label="数字"> <el-input v-model="number" prop="number" :rules="[{ validator: validateNumber, message: '请输入数字' }]"></el-input> </el-form-item> ``` 其中，validateNumber函数的实现如下： ``` methods: { validateNumber(rule, value, callback) { if (!value) { callback(new Error('请输入数字')); } else if (!/^\d+$/.test(value)) { callback(new Error('请输入整数')); } else { callback(); } } } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值