关于动态的新增输入框和删除

来源：互联网发布：sina邮箱端口imap 编辑：程序博客网时间：2024/06/04 19:45
可以根据需要增加输入框和删除输入框
这里写图片描述
<template>    <div>        <div style="z-index: 10; display: block">            <el-form :model="repairWorkHour" ref="repairWorkHour" label-width="100px" class="demo-dynamic">                <el-col :span="6">                    <el-form-item                            v-for="(repairWorker, index) in repairWorkHour.repairWorkers"                            :label="'域名' + index"                            :key="repairWorker.id"                            :prop="'repairWorkers.' + index + '.id'"                            :rules="{                              required: true, message: 'id不能为空', trigger: 'blur'                            }"                    >                        <el-input v-model="repairWorker.id"></el-input>                    </el-form-item>                </el-col>                <el-col :span="6">                    <el-form-item                            v-for="(repairWorker, index) in repairWorkHour.repairWorkers"                            :label="'域名' + index"                            :key="repairWorker.id"                            :prop="'repairWorkers.' + index + '.name'"                            :rules="{                              required: true, message: 'name不能为空', trigger: 'blur'                            }"                    >                        <el-input v-model="repairWorker.name"></el-input>                    </el-form-item>                </el-col>                <el-col :span="6">                    <el-form-item                            v-for="(repairWorker, index) in repairWorkHour.repairWorkers"                            :label="'域名' + index"                            :key="repairWorker.id"                            :prop="'repairWorkers.' + index + '.remark'"                            :rules="{                              required: true, message: '备注不能为空', trigger: 'blur'                            }"                    >                        <el-input v-model="repairWorker.remark"></el-input>                        <el-button @click.prevent="removeDomain(repairWorker)"  icon="delete"></el-button>                    </el-form-item>                </el-col>            </el-form>        </div>        <div >            <el-button type="primary" @click="submitForm('repairWorkHour')">提交</el-button>            <el-button @click="addDomain" icon="plus"></el-button>            <el-button @click="resetForm('repairWorkHour')">重置</el-button>        </div>    </div></template><script>    export default {        data() {            return {                repairWorkHour: {                    repairWorkers: [                        {id: '', name: '', remark: '',},                    ],                }            };        },        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) {                console.log('---------');                console.log(item);                var index = this.repairWorkHour.repairWorkers.indexOf(item)                if (index !== -1) {                    this.repairWorkHour.repairWorkers.splice(index, 1)                }            },            addDomain() {                this.repairWorkHour.repairWorkers.push({                    id: '',                    name: '',                    remark: '',                });                console.log(this.repairWorkHour.repairWorkers);            }        }    }</script>
阅读全文
0 0