美文网首页
vue 实现动态表单点击新增 增加一行输入框

vue 实现动态表单点击新增 增加一行输入框

作者: 一觉睡到丶小时候 | 来源:发表于2023-08-18 08:27 被阅读0次

    点击增加后会新增一行,点击每行后面的删除图标则会删除该行,新增按钮只会出现在最后一行

    <el-col :span="12" class="mb20">
                        <el-form-item
                            :label="index == 0 ? '选择原材料' : ''"
                            v-for="(item, index) in form.productItemList"
                            :key="index"
                            :prop="'domains.' + index + '.value'"
                        >
                            <el-select v-model="item.name" filterable clearable placeholder="请输入原材料" @change="changeValue" @clear="clearValue">
                                <el-option v-for="item in productAll" :key="item.value" :label="item.name" :value="item.id" />
                            </el-select>
                            <el-input v-model="item.num" placeholder="请输入数量" style="position: absolute; left: 300px; width: 160px"></el-input>
                            <el-button
                                v-if="index !== 0"
                                class="mt-2"
                                type="danger"
                                style="position: absolute; left: 545px; bottom: 0px"
                                @click.prevent="removeDomain(domain)"
                                >删除</el-button
                            >
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="addDomain" type="primary" style="position: absolute; left: 475px; bottom: 18px">添加</el-button>
                        </el-form-item>
                    </el-col>
    

    定义方法

    // 添加原材料
    const addDomain = () => {
        form.productItemList.push({
            name: '',
            num: '',
        });
    };
    
    // 删除原材料
    const removeDomain = (item: any) => {
        const index = form.productItemList.indexOf(item);
        if (index === -1) {
            form.productItemList.splice(index, 1);
        }
    };
    

    定义表单提交数据

    // 提交表单数据
    const form = reactive({
        productItemList: [
            {
                name: '',
                num: '',
            },
        ],
    });
    

    相关文章

      网友评论

          本文标题:vue 实现动态表单点击新增 增加一行输入框

          本文链接:https://www.haomeiwen.com/subject/pdaapdtx.html