是有这样的需求,根据后台传过来的字段,判断是生成复选框还是输入框,后台格式:
rightList:[
{lable:'输入框',val:'',input:0},
{lable:'复选框',val:false,input:1}],
input是0为输入框,1为复选框,val是form表单要绑定的值,因为是动态生成的,所以也需要后端给你传过来,因为我做的时候,如果不是后端传过来的,前端再添加val这个键值对的时候会导致form表单你输入的时候一直为空输入不进去,值也存不进去,最好是让后台的发送给你
然后 后端传过来的是数组包对象,form绑定需要绑定一个对象而不是数组,所以此处绑定一个data里定义好的空对象就行了
<el-form :model="rightListValue" :inline="true">
<!-- rightListValue 是个空对象 -->
<el-form-item
v-for="(item, index) in rightList"
:label="item.lable"
:key="index"
style="margin-right: 20px"
>
<el-input
v-if="item.input == 0"
v-model="item.val"
placeholder="请输入内容"
style="width: 200px"
></el-input>
<el-checkbox v-model="item.val" v-else></el-checkbox>
</el-form-item>
</el-form>
v-model绑定的是rightList的val,数据比组件生成提前所以正常运行使用无压力了