el-table 使用el-form 表单验证

  1. form定义时,需要定义tableData
javascript 复制代码
const supplyForm = ref({ tableData: [] })

const supplyFormRules = reactive({
	bomNumber: [{ required: true, message: '请填写物料编号', trigger: 'blur' }],
	bomName: [{ required: true, message: '请填写名称', trigger: 'blur' }]
})
  1. html绑定
html 复制代码
		<el-form :model="supplyForm" ref="supplyFormRef" inline-message class="supply-form-table">
			<el-table
				:data="supplyForm.tableData"
				border
				style="width: 100%"
				@cell-click="handleCellEnter"
				scrollbar-always-on
				highlight-current-row
				empty-text="暂无数据"
				max-height="420"
				stripe
				:header-cell-style="{ background: '#f5f7fa' }"
				:row-style="{ 'background-color': '#fdf6ec' }"
			>
				<el-table-column label="序号" prop="bomNo" width="80">
					<template v-slot="scope"> {{ scope.$index + 1 }}</template>
				</el-table-column>
				<el-table-column prop="bomNumber" label="物料编号">
					<template #default="scope">
						<el-form-item :prop="`tableData.[${scope.$index}].bomNumber`" :rules="supplyFormRules.bomNumber">
							<el-input class="cell-input" v-model="scope.row.bomNumber" size="small"
						/></el-form-item>
					</template>
				</el-table-column>
				<el-table-column prop="bomName" label="名称">
					<template #default="scope">
						<el-form-item :prop="`tableData.[${scope.$index}].bomName`" :rules="supplyFormRules.bomName">
							<el-input class="cell-input" v-model="scope.row.bomName" size="small"
						/></el-form-item>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template #default="scope">
						<el-button link @click="() => deleteSupplyRow(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-form>
  1. tableData赋值
javascript 复制代码
supplyForm.value.tableData.push(bomItem)
相关推荐
Mintopia13 分钟前
🌐 数据合规框架下的 WebAIGC 训练数据处理技术规范
前端·javascript·aigc
骥龙32 分钟前
2.6、Web漏洞挖掘实战(下):XSS、文件上传与逻辑漏洞深度解析
前端·xss
用户66006766853940 分钟前
从 var 到 let/const:JavaScript 变量声明的进化之路
javascript
用户4338453756940 分钟前
Promise深度解析,以及简易版的手写实现
前端
十年_H42 分钟前
Cesium自定义着色器-片元着色器数据来源
javascript·cesium
梦之云43 分钟前
state 状态相关
前端
梦之云1 小时前
effect 副作用相关
前端
UIUV1 小时前
var、let 与 const:JavaScript 变量声明的演进与最佳实践
javascript
golang学习记1 小时前
从0死磕全栈之Next.js 生产环境优化最佳实践
前端
Mintopia1 小时前
🧠 Next.js 还是 Nuxt.js?——当 JavaScript 碰上命运的分叉路
前端·后端·全栈