點擊增加后會新增一行，點擊每行后面的刪除圖標則會刪除該行，新增按鈕只會出現在最后一行

<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: '',
        },
    ],
});