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

猜你喜欢

转载自blog.csdn.net/weixin_46872121/article/details/126121362