點擊增加后會新增一行岗憋，點擊每行后面的刪除圖標(biāo)則會刪除該行，新增按鈕只會出現(xiàn)在最后一行
<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="請輸入數(shù)量" 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);
}
};
定義表單提交數(shù)據(jù)
// 提交表單數(shù)據(jù)
const form = reactive({
productItemList: [
{
name: '',
num: '',
},
],
});
