vue form表单循环校验

学不会•

已于 2024-01-24 18:32:26 修改

阅读量882

点赞数 10

文章标签： vue.js elementui javascript

于 2024-01-24 18:11:35 首次发布

本文链接：https://blog.csdn.net/qq_41588991/article/details/135828635

版权

本文介绍如何在Vue应用中使用ElementUI的El-Form组件创建一个机构管理表单，包括机构名称输入验证和机构属性的选择，以及添加和删除功能。

摘要由CSDN通过智能技术生成

<template>
  <div class="box">
    <el-form :model="item" :rules="rules" :ref="`formRef_${index}`" v-for="(item,index) in ruleForm" :key="index">
      <div class="content">
        <Title :title="`机构${index+1}`" />
        <el-form-item label="机构名称" prop="name">
          <el-input v-model="item.name" class="w-340" maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="机构属性" class="checkbox-group" prop="type">
          <el-checkbox-group v-model="item.type">
            <el-checkbox label="管理中心" name="1"></el-checkbox>
            <el-checkbox label="推广中心" name="2"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </div>
      <div class="btn">
        <el-button @click="del(index)" v-if="ruleForm.length >1">删除</el-button>
        <el-button @click="add">添加</el-button>
      </div>
    </el-form>

    <el-button style="margin-top:100px" type="primary" @click="submitForm">提交</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      rules: {
        name: [
          { required: true, message: '请输入机构名称', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择机构属性', trigger: 'change' }
        ]
      },
      ruleForm: [
        {
          name: '',
          type: []
        }
      ]
    }
  },
  methods: {
    del (index) {
      this.ruleForm.splice(index, 1)
    },
    add () {
      this.ruleForm.push(
        {
          name: '',
          type: []
        }
      )
    },
    // 提交
    submitForm () {
     const arr = []
      this.ruleForm.forEach(async (item, index) => {
        try {
          await this.$refs[`formRef_${index}`][0].validate()
          arr.push(true)
        } catch (error) {
          arr.push(false)
        }
        const flag = arr.every(item => item)
        console.log(flag)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  margin: 300px;
}
</style>