elementui form表单 动态绑定prop

在这里插入图片描述

表单中的数据是循环tasks动态展示的

form:{
	tasks:[],
},

//tasks里的对象
{
	taskId:'',
	taskName:'',
	userId:'',
	userName:'',
}
<el-form :model="form" ref="form" :inline="true">
 	<el-row :gutter="10" v-for="(item,index) in form.tasks" :key="index">
        <el-form-item label="下个节点名称:" :prop="'tasks.'+index+'.taskId'">{{ item.taskName }}</el-form-item>
        <el-form-item 
	        label="下个节点审批用户:" 
	        :prop="'tasks.'+index+'.userId'" 
	        :rules="{required:true,message:'请选择审批用户', trigger: 'change'}">
	        <span>{{ item.userName}}</span>
        </el-form-item>
	</el-row>
</el-form>
  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ElementUI是一款基于Vue.js开发的UI组件库,它提供了大量的组件和工具来简化Web应用程序的开发过程。其中,FormElementUI中一个常用的组件,用于收集用户输入数据并进行校验。 在使用ElementUIForm数据时,如果数据不在同一层,可以使用对象的属性路径来实现。具体的步骤如下: 1.首先,需要在Vue实例中义一个对象,作为数据的容器。这个对象可以包含多个层级,每个层级都是一个属性。 2.在Form中,通过设置model属性将Form与数据的对象关联起来。这样,Form中的输入数据会自动同步到数据的对象中。 3.在Form中的每个输入项中,需要通过设置prop属性来指数据对象的属性路径。属性路径的格式为`'对象的属性名.子对象的属性名.子对象的属性名'`。通过这样设置,输入项的值会自动与数据对象中对应属性路径的值进行双向。 这样,无论数据是不是在同一层,都可以通过设置属性路径来实现数据的。当用户修改输入项的值时,数据对象中对应属性路径的值也会自动更新。同理,当数据对象中对应属性路径的值发生改变时,输入项的值也会自动更新。 总结:ElementUIForm数据时,可以通过设置属性路径来实现不同层级数据的。通过这样的设置,Form和数据对象之间可以实现自动的双向数据,方便开发人员处理不同层级的数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值