element v-for动态绑定数据循环列表表单验证实现

最新推荐文章于 2023-11-14 21:36:29 发布

alokka

最新推荐文章于 2023-11-14 21:36:29 发布

阅读量730

点赞数

分类专栏： element

本文链接：https://blog.csdn.net/alokka/article/details/118573047

版权

element 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

该博客展示了如何在Vue.js中使用Element-UI库创建动态表单，特别是在el-form-item中添加规则进行数据验证。示例代码演示了如何遍历动态生成的表单项，并针对每个域名输入框设置必填规则，同时提供了添加和删除域名的功能，以及表单的提交、重置操作。

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

1. 总结

遍历的 el-form-item 数据 domains 为 el-form v-model 对象里的数据
在遍历的 el-form-item 中添加rules，:prop="‘domains.’ + index + ‘.value’"

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<body>
    <div id="app">
        <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
            <el-form-item prop="email" label="邮箱" :rules="[
                { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
              ]">
                <el-input v-model="dynamicValidateForm.email"></el-input>
            </el-form-item>
            <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'
              }">
                <el-input v-model="domain.value"></el-input>
                <el-button @click.prevent="removeDomain(domain)">删除</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
                <el-button @click="addDomain">新增域名</el-button>
                <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
    <script type="text/javascript">
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    dynamicValidateForm: {
                        domains: [{
                            value: ''
                        }],
                        email: ''
                    }
                };
            },
            methods: {
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            alert('submit!');
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                resetForm(formName) {
                    this.$refs[formName].resetFields();
                },
                removeDomain(item) {
                    var index = this.dynamicValidateForm.domains.indexOf(item)
                    if (index !== -1) {
                        this.dynamicValidateForm.domains.splice(index, 1)
                    }
                },
                addDomain() {
                    this.dynamicValidateForm.domains.push({
                        value: '',
                        key: Date.now()
                    });
                }
            }
        });
    </script>
</body>

</html>