Element-UI 表格动态添加响应校验

最新推荐文章于 2022-11-14 15:29:15 发布

绝知芳誉亘千乡

最新推荐文章于 2022-11-14 15:29:15 发布

阅读量363

点赞数

文章标签： vue elementui

本文链接：https://blog.csdn.net/qq_45443060/article/details/122986488

版权

本文介绍了如何在Vue.js项目中利用Element UI库，通过表单组件在表格内动态添加数据行，并实现价格和数量字段的数据验证。通过`el-form`和`el-table`结合，以及`slot-scope`用来自定义表格列，实现了输入框内数据的实时校验，确保了数据的准确性。

摘要由CSDN通过智能技术生成

方法添加表格数据

略

绑定prop（只做记录日后详解 copy就完了）

<el-form :model="form" :rules="rules" ref="ruleForm">
	<el-table :data="form.tableData" border style="width: 100%">
		<el-table-column prop="price" label="价格" align="center">
			<template slot-scope="scope">
				<el-form-item :prop="'tableData.' + scope.$index +'.price'" :rules="rules.price">
					<el-input-number v-model="scope.row.price" :precision="2" :min="0.01"></el-input-number>
				</el-form-item>
			</template>
		</el-table-column>
		<el-table-column prop="count" label="数量" align="center">
			<template slot-scope="scope">
				<el-form-item :prop="'tableData.' + scope.$index + '.count'" :rules="rules.count">
					<el-input-number v-model="scope.row.count" :min="0"></el-input-number>
				</el-form-item>
			</template>
		</el-table-column>
	</el-table>
</el-form>