element-ui表格内编辑且带有表单校验。代码示例(注意的调整下样式)

1,370 阅读1分钟
<template>
	<div class="editorTable">
		<el-form :model="form">
			<el-table
				:data="form.tableData"
				border
			>
				<el-table-column align="center">
					<template v-slot:header>
						<i style="color: red">*</i>账号
					</template>
					<template v-slot="scoped">
						<el-form-item
							:prop="`tableData.${scoped.$index}.acount`"
							:rules="required"
						>
							<el-input v-model="scoped.row.acount"></el-input>
						</el-form-item>
					</template>
				</el-table-column>
			</el-table>
		</el-form>
	</div>
</template>
<script>
export default {
	data() {
		return {
			required: {
				required: true,
				message: "请输入该必填项",
				trigger: ["change", "blur"],
			},
			form: {
				tableData: [],
			},
		};
	},
	methods: {
		addRow() {
			class TableRow {
				acount = null;
			}
			this.form.tableData.push(new TableRow());
		},
	},
};
</script>

<style lang="scss" scoped>
.editorTable {
	::v-deep .el-table__row > td {
		padding: 5px;
	}
	::v-deep .cell {
		padding: 0 !important;
	}
	.el-form-item {
		margin-bottom: 0px;
	}
	::v-deep .el-form-item__error {
		top: calc(50% - 10px);
		left: 16px;
	}
	::v-deep .el-form-item__content {
		margin: 0 !important;
	}
}
</style>