Vue Render 函数 Table内编辑 应用

Vue Render 函数 Table内编辑 应用
前言 在以前版本中,通过在table中嵌套span和input的方式,来实现这个功能,但是在实际使用过程中,代码会显得特别的冗长繁琐。这个时候,可以通过使用render函数来解决这个问题。
思路 思路的话,大概都是一样的,通过控制其span、input的显隐来实现,点击后更改的作用。
代码部分 通过creatElement创建一个divVNode,在再其中创建span的和input的VNode。

createElement('el-input', {}), createElement('span', {}),

span VNode domProps插入基础属性,再通过attrs赋值,通过class来控制showClass属性是否生效。
on中,通过input方法,将input中的value值传递到父级中,父级将值赋给当前单元格。
【Vue Render 函数 Table内编辑 应用】blur则是当input失去焦点时,隐藏input,使span显示。
domProps: { value: '', }, ref: 'input', attrs: { value: this.value }, on: { input: (event) => { this.$emit('input', event) }, blur: () => { this.show = 'text' this.$emit('refreshTable') }, }, class: { showClass: this.show != 'input', },

完整代码 外部代码 scope.row.date为行数据中单元格的数据
refreshTable是为了保证每次更新数据时,单元格能即使刷新

组件代码
.showClass { display: none; }

    推荐阅读