vue3结合element-plus实现动态表格，可添加、删除、对单行数据判断。

实现效果：查看源代码

实现代码：

<div class="arrTable-Box">
	<el-table :data="tableData" border max-height="250">
		<el-table-column prop="name" label="Name">
			<template #default="{row}">
				<el-input v-model="row.name" clearable />
			</template>
		</el-table-column>
		<el-table-column prop="age" label="Age">
			<template #default="{row}">
				<el-input v-model="row.age" clearable />
			</template>
		</el-table-column>
		<el-table-column prop="balance" label="Balance">
			<template #default="{row}">
				<el-input v-model="row.balance" clearable />
			</template>
		</el-table-column>
		<el-table-column fixed="right" label="Operations">
			<template #default="scope">
				<el-button link type="primary" size="small" v-if="scope.$index!=0" @click.prevent="removeRow(scope.$index)">
					Remove
				</el-button>
			</template>
		</el-table-column>
	</el-table>
	<div class="flex">
		<el-button class="w100 mt10" type="danger" @click="addRow"> Add </el-button>
		<el-button class="w100 mt10" type="primary" @click="sumbit"> sumbit </el-button>
	</div>
</div>

import {ref} from 'vue'
const tableData = ref([{
		name: 'Tom',
		age: 20,
		balance: 100,
	},
])

/* 删除行 */
const removeRow = (index) => {
	tableData.value.splice(index, 1)
}

/* 新增行 */
const addRow = () => {
	tableData.value.push({})
}

/* 判断是否为空对象 */
const isRowEmpty = (row) => Object.keys(row).length === 0;
/* 判断每行数据是否为真 */
const isRowComplete = (row) => row.name && row.age && row.balance;
/* 提交 */
const sumbit = () => {
	const data=[...tableData.value];
	for (let i = 0; i < data.length; i++) {
	    const row = data[i];
	    if (isRowEmpty(row)) {
			ElMessage.warning(`请填写第${i + 1}行内容！`);
			return;
	    }
	    if (!isRowComplete(row)) {
			ElMessage.warning(`请将第${i + 1}行内容补充完整`);
			return;
	    }
	}
	console.log('submit data:',data);
}