ElementUI 单据、elementui 表单
在现代Web开发中，ElementUI是一个非常流行的前端UI框架，它为开发者提供了丰富且美观的组件库。当涉及到创建单据和表单时，ElementUI能够提供简洁高效的解决方案。通过使用ElementUI中的Form（表单）、Input（输入框）、Select（选择器）等组件，可以快速搭建出功能完善的单据和表单界面，并且利用其内置的验证规则确保数据的有效性。
一、基于ElementUI构建基础表单
1. 解决方案
为了创建一个简单的订单录入单据，我们可以使用el-form来包裹整个表单结构。对于每个需要收集的数据项，比如商品名称、数量、单价等，都可以用相应的ElementUI组件表示，如el-input用于文本输入，el-select用于下拉选择。
html
<div>
<!-- 使用 el-form 创建表单 -->
提交
</div>
</p>
export default {
data() {
return {
orderForm: {
productName: '',
quantity: 1,
price: null
},
rules: {
productName: [
{ required: true, message: '请输入商品名称', trigger: 'blur' }
],
quantity: [
{ required: true, message: '请选择数量', trigger: 'change' }
],
price: [
{ required: true, message: '请输入单价', trigger: 'blur' },
{ type: 'number', message: '单价必须为数字值'}
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('提交成功!');
} else {
console.log('error submit!!');
return false;
}
});
}
}
}
<p>这段代码实现了最基础的订单录入单据。定义了一个orderForm对象存储表单数据，以及rules对象定义了各个字段的校验规则。然后通过el-form-item标签为每个表单项添加了label标签，并且绑定了对应的v-model属性到orderForm对象上。最后定义了submitForm方法，在点击提交按钮时调用该方法进行表单验证。
二、动态增加表单项
有时候我们希望用户可以根据实际需求动态地添加或删除某些表单项，例如在一个采购申请单中可能需要列出多个不同商品的信息。此时可以通过Vue.js提供的响应式特性结合ElementUI轻松实现这一功能。
html
<div>
<div>
删除
</div>
新增商品
提交
</div>
</p>
export default {
data() {
return {
purchaseForm: {
items: [
{
productName: '',
quantity: 1
}
]
},
rules: {
productName: [
{ required: true, message: '请输入商品名称', trigger: 'blur' }
],
quantity: [
{ required: true, message: '请选择数量', trigger: 'change' }
]
}
};
},
methods: {
addItem() {
this.purchaseForm.items.push({
productName: '',
quantity: 1
});
},
removeItem(index) {
if (this.purchaseForm.items.length > 1) {
this.purchaseForm.items.splice(index, 1);
}
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('提交成功!');
} else {
console.log('error submit!!');
return false;
}
});
}
}
};
<p>在这个例子中，我们将所有商品信息保存在一个名为items的数组里。通过v-for指令遍历这个数组，并为每一个元素生成一组表单项。给每个表单项指定了的prop属性以便于ElementUI进行单独验证。当用户点击“新增商品”按钮时会调用addItem方法向数组末尾追加一个新的空对象；而点击“删除”按钮则会触发removeItem方法从数组中移除对应位置的对象。
三、与后端交互获取初始值
实际项目中往往需要从服务器获取表单的初始值，这通常发生在编辑已有记录的情况下。ElementUI配合Vue.js的双向绑定机制使得这个过程变得十分简单。假设我们的API接口返回了一条订单信息，只需要将这些数据赋值给orderForm对象即可自动填充表单。
javascript
// 假设这是从后端获取到的数据
const orderData = {
productName: '苹果',
quantity: 5,
price: 3.5
};</p>
<p>// 将数据赋值给orderForm
this.orderForm = { ...orderData };</p>
<p>// 如果有其他初始化操作也可以在这里执行
需要注意的是，如果表单中有嵌套结构（如上述采购申请单中的items数组），那么在处理这类复杂数据时应该更加谨慎，确保正确地映射到表单模型上。考虑到网络请求可能存在失败的情况，在实际应用中还需要加入适当的错误处理逻辑。
ElementUI为创建单据和表单提供了便捷的方式。无论是简单的数据收集还是复杂的业务场景，都可以借助ElementUI丰富的组件库和强大的验证机制来提高开发效率并保证用户体验。
