Vue+iView中在table表格中使用render函数嵌入input，实现双向数据绑定

1.场景

在父组件中有个弹框，在这个弹框中我可以进行如下行为：

• 根据select框进行批次号的筛选，根据这个筛选的值去获取货架列表（tableList）
• 货架列表是以表格的形式展示的，在这个表格中嵌入了输入框（value：shelveNumber）
• 输入框初始值来自后端，若用户进行修改的话，需要更新双向绑定到tableList中
• table表格支持单选/多选功能，且如row.shelveNumber>0则默认勾选
• 当用户修改了某个输入框之后默认勾选状态全部取消，若想选中某项需要用户自己勾选
• 用户可以保留默认勾选的项，也可以进行input修改再勾选，然后拿到用户修改且勾选的数据进行回显

最主要的思想： 修改input的值之后，修改原本tableList中该row下shelveNumber数据，后面手动勾选的时候（勾选的也是tableList的数据），然后根据table中的@on-selection-change事件，将这个勾选项push到selectList中（用来保存需要回显的数据）

 

下面放上几张图片以更加明确的说明：

父组件：这里可以通过1/2来触发打开子组件（弹框），通过在弹框中进行数据操作，然后回显到3中

 

 子组件（弹框）：

• 可更改批次号以更新表格中的数据
• table中默认勾选项取决于数量这一列的数据，这里有100>0，则默认勾选；有0≯0则不默认勾选
• inpu框可以自行输入

 演示：

 2.实现

话不多数，上代码：这里主要说明一下主要的代码，即使用iview中table使用render函数嵌入input，且实现双向数据绑定

2.1 子组件（弹框）：

结构：

逻辑：

 

 

 主要：（render函数嵌入input）：