iview 通过render函数渲染生成的input输入框实现双向绑定

问题：iview中表格组件通过render函数动态生成Input组件输入框插入表格中，动态生成的Input输入框组件无法绑定v-model，这个时候我们需要实现双线绑定的功能。

image.png

item.render = (h, param) => {
   let currentRowData = vm.formItem.config_list[param.index];
    return h('Div',{
            style:{
                display:'flex'
            },
        },
        [   
            h('Input',{
                props:{
                    value:currentRowData[item.key],
                },
                
                domProps:{
                    id:item.key+param.index
                },
                on:{
                    
                    'on-change':(event) => {
                         vm.formItem.config_list[param.index][item.key] = event.target.value;
                         this.$nextTick(()=>{ 
                            var Odiv = document.getElementById(item.key+param.index)
                            var iptarr = Odiv.getElementsByTagName('input')
                                iptarr[0].focus()
                         })
                    }
                },
            }),
            h('Span',{
                style:{lineHeight:'32px',marginLeft:'2px',
                    overflow:'hidden',
                    textOverflow:'ellipsis',
                    whiteSpace:'nowrap',
                    width:'2em'
                },
                on:{
                    
                }
            },
                item.unit)

        ]
    );
   
}

在输入框输入值改变时，onchange函数里，把改变后的值赋给绑定的值，这个操作会导致输入框失去焦点，需要再次点击输入框才能输入，十分影响用户体验。解决办法：在this.$nextTick(()=>{})里再次获取焦点。
这个方法是vue提供的一个api，它的作用是等dom渲染完成之后才执行的方法，具体nextTick的作用可以参考vue官方文档https://cn.vuejs.org/v2/api/#Vue-nextTick

参考 ivew通过render渲染函数动态生成的Input输入框实现双向绑定