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

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

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