应用情景

在form表单中，动态显示多选框：远程加载多选框选项，将每一个选项渲染到表单上显示出来，而且在每一个选项后加入一个文本框。所以，问题在于：①在远程加载多选框的选项之后，如何动态加载多选框以及文本框②如何动态设置文本框的v-model以便使用时获取表单数据

下面的多选选项是不确定的：

动态加载checkBox

1.数据源。这里的数据源先这样写，后期远程获取数据再更改，因为现在还没有建表。value值可更改

2.checkBox。VUE
利用v-for实现多选框的动态加载

<el-checkbox  v-for='item in this.smeltEquOptions' :label="item.label" :key="item.value" @change="smeltEquBoxChange(item.value)" >{{item.label}} </el-checkbox> 

可是，如何在每一个多选框加载的时候，在后面加一个文本框呢？

3.el-input
直接可以在标签内部直接加标签

<el-checkbox  v-for='item in this.smeltEquOptions' :label="item.label" :key="item.value" @change="smeltEquBoxChange(item.value)"		    {{item.label}}  
 		<el-input v-model="registerForm.enterEquipment.smeltEquNo[item.value]" style="width:100px;"/>台
</el-checkbox> 

但是，每个要有自己独立的 el-model，才方便后期取值。最好能与对应的多选框的value对应上。

4.input数据源
先定义一个map，然后在created()方法内部，将多选框数据源的value值一个个作为key放到map中

Object.key()方法可自行查询。

注意：由于我的多选框目前是定义好的，所以在created()方法内这么写。如果远程加载的话，必须要在多选框数据源获取数据后再进行 文本框数据源对多选框数据源value值的copy。不然copy过来都是空的。

至此，就基本完成了

测试：

将页面“下一步”按钮功能改成VOD的id。

注意：input的v-model一定不要写死了，不然文本框会混淆。