详解详解Vue+Element的动态表单，动态表格（后端发送配置，前的动态表单，动态表格（后端发送配置，前
端动态生成）端动态生成）
主要介绍了Vue+Element动态表单动态表格，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有
一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
动态表单生成动态表单生成
ElementUI官网引导
Element表单生成
Element动态增减表单,在线代码
关键配置关键配置
1. template中,form和form-item的写法和绑定
2. data里的值为空
3. methods中，向后台获取数据的函数写法
1. form,form-item,input的写法的写法[^code]
<el-form :model="dynamicValidateForm" label-width="120px" ref="dynamicValidateForm">
<el-form-item :key="domain.prop"
:label="domain.label"
:prop="domain.prop"
:rules="rules"
v-for="domain in dynamicValidateForm.domains">
<el-input type="money"
:disabled="domain.editable"
autocomplete="off"
v-model.number="domain.value">
</el-input>
</el-form-item>
</el-form>
需要注意的是，:model和ref绑定的值不能用'form'来表示，不然会出错。
也就是说下面的写法会导致运行不报错，但是结果会显示不出来
问题代码:
<el-form :model="form" label-width="120px" ref="form">
</el-form>
我上的代码里面，基本让后台传回来的数据里包含prop,label,value（输入框默认值填入）,editable(是否可编辑)四个值。
当然，如果你还想动态定义类型，就让后端多传一个type，用v-if判断一下type是input或者radio或者其他类型就行，网上也有
很多类似的解读，此处仅讨论input输入框。
2. data里的值为空里的值为空[^code]
data () {
return {
dynamicValidateForm: [
domains: {}
],
rules: [],
id: ''
}
}
此处rules为什么不写校验规则，原因是不能判断后端会返回多少个输入框表单类型，你就不能判断你需要在domains里占用多
少占位符。
如果你强行写上rules校验，会导致界面提示你输入没空（就算你确实输入了值），因为你没有在domains里写上若干个对象
(如下)，但是现在的需求是让后端定义数量，所以前端不能确定多少个就不能使用下面的写法，所以就不能在rules里写校验。
问题代码:
data () {
return {
dynamicValidateForm: [
domains: {
{
prop: '',
label: ''
weixin_38569722
- 粉丝: 1
- 资源: 925
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- 27页智慧街道信息化建设综合解决方案.pptx
- 计算机二级Ms-Office选择题汇总.doc
- 单链表的插入和删除实验报告 (2).docx
- 单链表的插入和删除实验报告.pdf
- 物联网智能终端项目设备管理方案.pdf
- 如何打造品牌的模式.doc
- 样式控制与页面布局.pdf
- 武汉理工Java实验报告(二).docx
- 2021线上新品消费趋势报告.pdf
- 第3章 Matlab中的矩阵及其运算.docx
- 基于Web的人力资源管理系统的必要性和可行性.doc
- 基于一阶倒立摆的matlab仿真实验.doc
- 速运公司物流管理模式研究教材
- 大数据与管理.pptx
- 单片机课程设计之步进电机.doc
- 大数据与数据挖掘.pptx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0