【Element】动态增减表单项，编号动态变化

效果展示：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication6.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <!-- 引入样式 -->
    <link href="Script/element-ui@2.15.6/index.css" rel="stylesheet" />
    <!-- 引入组件库 -->
    <script src="Script/Vue/vue.js"></script>
    <script src="Script/element-ui@2.15.6/index.js"></script>
</head>
<body>
    <div id="app" style="width: 500px">
        <div>
            <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>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {
                    dynamicValidateForm: {
                        domains: [{
                            value: ''
                        }],
                        email: ''
                    }
                }
            },
            methods: {
                submitForm: function (formName) {
                    this.$refs[formName].validate(function (valid) {
                        if (valid) {
                            alert('submit!');
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },

                submitForm: function (formName) {
                    this.$refs[formName].resetFields();
                },

                removeDomain: function (item) {
                    var index = this.dynamicValidateForm.domains.indexOf(item)
                    if (index !== -1) {
                        this.dynamicValidateForm.domains.splice(index, 1)
                    }
                },
                addDomain: function () {
                    this.dynamicValidateForm.domains.push({
                        value: '',
                        key: Date.now()
                    });
                }
            }
        })
    </script>
</body>
</html>
View Code

 

posted @ 2022-01-17 14:50  智者见智  阅读(86)  评论(0)    收藏  举报