动态增删表单

动态增删表单

效果图如下

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

1. 显示部分

// An highlighted block
<div v-for="(item, index) in ruleForm.dynamicItem" :key="index">
                    <el-form-item label="账 户：" :prop="'dynamicItem.' + index + '.account'" :rules="{required: true, message: '账户不能为空!', trigger: 'blur'}">
                        <el-input
                            v-model="item.account"
                            placeholder="请输入账户!"
                            style="width: 85%"
                        ></el-input>
                        <el-button circle @click.prevent="redAccount(domains)"><i class="el-icon-minus"></i></el-button>
                    </el-form-item>
                    <el-form-item label="密 码：" :prop="'dynamicItem.' + index + '.passwd'" :rules="{required: true, message: '密码不能为空!', trigger: 'blur'}">
                        <el-input v-model="item.passwd" placeholder="请输入密码!" style="width: 85%;"></el-input>
                    </el-form-item>
                </div>

2. data 部分代码

ruleForm: {
    account: '',
    passwd: '',
    dynamicItem: []
}

3. method部分代码

// 编辑 + 按钮
addAccount() {
    this.ruleForm.dynamicItem.push({
        account: '',
        passwd: ''
    });
},
// 编辑 - 按钮
redAccount(item, index) {
    this.ruleForm.dynamicItem.splice(index, 1);
},
closeReset() {
    this.ruleForm.dynamicItem = [];
},