当前位置:   article > 正文

element ui form表单循环嵌套 及嵌套表单item的校验方法_elementui给嵌套表单加验证

elementui给嵌套表单加验证

html: 

  1. <div class="strategy-name-box">
  2. <div
  3. class="strategy-item"
  4. v-for="(item, index) in form.strategyList"
  5. :key="index"
  6. >
  7. <div class="strategy-title">{{ item.nodeName }}</div>
  8. <el-form-item
  9. class="strategy-content"
  10. v-for="(item1, index1) in item.inputPreConfig"
  11. :label="'域名' + index"
  12. :key="index1"
  13. :prop="`strategyList[${index}].inputPreConfig[${index1}].value`"
  14. :rules="{
  15. required: true,
  16. message: '域名不能为空',
  17. trigger: 'blur',
  18. }"
  19. >
  20. <el-input v-model="item1.value" />
  21. </el-form-item>
  22. </div>
  23. </div>

js: 

  1. form: {
  2. taskTimeout: "",
  3. cycleInterval: "",
  4. cycleTime: "",
  5. strategyList: [
  6. {
  7. nodeName: "",
  8. inputPreConfig: [
  9. {
  10. name: "",
  11. value: "",
  12. },
  13. ],
  14. },
  15. {
  16. nodeName: "",
  17. inputPreConfig: [
  18. {
  19. name: "",
  20. value: "",
  21. },
  22. ],
  23. },
  24. ],
  25. },
  1. submit(formName) {
  2. this.$refs[formName].validate((valid) => {
  3. if (valid) {
  4. alert(1111)
  5. } else {
  6. return false;
  7. }
  8. });
  9. },

详细的大家可以参考:element ui form循环嵌套表单 及嵌套表单的验证方法(校验)_element循环表单_RxnNing的博客-CSDN博客

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小丑西瓜9/article/detail/115776
推荐阅读
相关标签
  

闽ICP备14008679号