前台-编辑或查看-表单技巧

本文探讨了在前端开发中处理编辑和查看表单时的两种三元运算符技巧,以及如何根据编辑或添加场景选择不同的数据接口。
摘要由CSDN通过智能技术生成

1.两个三元运算符

 2.根据编辑或者添加,赋值不同的接口

	// 提交编辑或者添加的表单
	const invoiceTitleSubmit = () => {
		if (!formRef.value) return
		formRef.value.validate((valid, fields) => {
			if (valid) {
				if (isPhone(invoiceTitleForm.value.mail as string)) {
					invoiceTitleForm.value.phone = invoiceTitleForm.value.mail as string
					invoiceTitleForm.value.email = ''
				} else if (isEmail(invoiceTitleForm.value.mail as string)) {
					invoiceTitleForm.value.phone = ''
					invoiceTitleForm.value.email = invoiceTitleForm.value.mail as string
				}
				formLoading.value = tr
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于 Element UI 的编辑表格表单校验,你可以使用 Element UI 提供的表单校验规则来实现。 首先,你需要在表单的每个字段中定义校验规则。例如,如果要校验一个输入框输入的内容是否为非空字符串,你可以使用 `required` 规则。在编辑表格中,你可以通过在表格列中设置 `rules` 属性来定义校验规则。 下面是一个简单的示例,展示了如何在 Element UI 的表格中使用校验规则: ```html <template> <el-table :data="tableData" style="width: 100%"> <el-table-column label="姓名" prop="name"> <template slot-scope="scope"> <el-form-item :prop="'name.' + scope.$index" :rules="nameRules"> <el-input v-model="scope.row.name"></el-input> </el-form-item> </template> </el-table-column> <el-table-column label="年龄" prop="age"> <template slot-scope="scope"> <el-form-item :prop="'age.' + scope.$index" :rules="ageRules"> <el-input v-model.number="scope.row.age"></el-input> </el-form-item> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: 'John', age: 20 }, { name: 'Jane', age: null }, { name: '', age: 30 } ], nameRules: [ { required: true, message: '请输入姓名', trigger: 'blur' } ], ageRules: [ { required: true, message: '请输入年龄', trigger: 'blur' }, { type: 'number', message: '年龄必须为数字', trigger: 'blur' } ] }; } }; </script> ``` 在上面的示例中,我们在姓名和年龄字段的 `el-form-item` 中分别设置了校验规则。 `nameRules` 定义了姓名字段的校验规则,要求输入不能为空; `ageRules` 定义了年龄字段的校验规则,要求输入不能为空且必须为数字。 你可以根据实际需求,定义更多的校验规则。除了 `required` 和 `type` 规则之外,还可以使用其他内置的规则或自定义规则来满足你的需求。 当用户在表格中编辑数据时,Element UI 会自动触发校验规则,并在不满足规则时显示相应的错误提示信息。你可以根据需求设置校验触发的时机,如 `blur`(失去焦点时触发)、`change`(值发生改变时触发)等。 注意:以上示例是基于 Element UI 2.x 版本的。如果你使用的是 Element Plus,则使用方式类似,只需将组件名换成 `el-input`、`el-table` 等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值