详解Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）_动态配置表单 - CSDN文库

4星 · 超过85%的资源 37 浏览量更新于2023-03-03 评论 3 收藏 64KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

详解详解Vue+Element的动态表单，动态表格（后端发送配置，前的动态表单，动态表格（后端发送配置，前

端动态生成）端动态生成）

动态表单生成动态表单生成

ElementUI官网引导

Element表单生成

Element动态增减表单,在线代码

关键配置关键配置

template中,form和form-item的写法和绑定

data里的值为空

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: ''

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论1

husyra5

2023-08-04

有没有简单的修改form表单参数的方法

weixin_38651165

粉丝: 4
资源: 901

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈