zoukankan      html  css  js  c++  java
  • vue+elementUI动态增加表单项并添加验证

    参考elementUI官网以及网上的其他一些资料。话不多说,直接贴代码。
    htmt部分:

    <div id="app" style=" 500px;">
            <el-form :model="environmentForm" ref="environmentForm">
                <el-row :gutter="24" v-for="(item, index) in environmentForm.items" :key="item.key">
                    <el-col :span="6">
                        <el-form-item :prop="'items.' + index + '.name'"
                            :rules="{required: true, message: '名称不能为空', trigger: 'blur'}">
                            <el-input v-model="item.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item :prop="'items.' + index + '.variable'"
                            :rules="{required: true, message: '变量值不能为空', trigger: 'blur'}">
                            <el-input v-model="item.variable"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3" v-if="environmentForm.items.length !== 1">
                        <el-button @click="removeEnvironmentForm(item)" class="el-icon-delete" size="mini" circle>
                        </el-button>
                    </el-col>
                    <el-col :span="3">
                        <el-button @click="addEnvironmentForm" size="mini" class="el-icon-plus" circle></el-button>
                    </el-col>
                </el-row>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('environmentForm')">提交</el-button>
                    <el-button @click="resetForm('environmentForm')">重置</el-button>
                </el-form-item>
            </el-form>

        </div>
    <script>
        var vm;
        $(function () {
            vm = new Vue({
                el: '#app',
                data: {
                    environmentForm: {
                        items: [{
                            name: '',
                            variable: '',
                        }]
                    }
                },
                mounted: function () {},
                methods: {
                    resetForm(formName) {
                        this.$refs[formName].resetFields();
                    },
                    removeEnvironmentForm(item) {
                        var index = this.environmentForm.items.indexOf(item)
                        if (index !== -1{
                            this.environmentForm.items.splice(index, 1)
                        }
                    },
                    addEnvironmentForm() {
                        this.environmentForm.items.push({
                            name: '',
                            variable: '',
                            description: '',
                            key: Date.now()
                        });
                    },
                }
            })
        })
    </script>

    实现效果:单个时

     多个时显示删除按钮

  • 相关阅读:
    入门菜鸟
    FZU 1202
    XMU 1246
    Codeforces 294E Shaass the Great 树形dp
    Codeforces 773D Perishable Roads 最短路 (看题解)
    Codeforces 814E An unavoidable detour for home dp
    Codeforces 567E President and Roads 最短路 + tarjan求桥
    Codeforces 567F Mausoleum dp
    Codeforces 908G New Year and Original Order 数位dp
    Codeforces 813D Two Melodies dp
  • 原文地址:https://www.cnblogs.com/sheep-fu/p/14148347.html
Copyright © 2011-2022 走看看