Vue Render 函数 Table内编辑 应用
前言
在以前版本中,通过在table中嵌套span和input的方式,来实现这个功能,但是在实际使用过程中,代码会显得特别的冗长繁琐。这个时候,可以通过使用render函数来解决这个问题。
思路
思路的话,大概都是一样的,通过控制其span、input的显隐来实现,点击后更改的作用。
代码部分
通过creatElement
创建一个div
VNode,在再其中创建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;
}
推荐阅读
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- vue.js|vue中使用axios封装成request使用
- vue.js组件开发
- 前端开发|Vue2.x API 学习
- javascript|vue使用js-xlsx导出excel,可修改格子样式,例如背景颜色、字体大小、列宽等
- vue.js|后端开发学习Vue(一)
- JS|VUE学习笔记[30-46]
- vue.js|Vue为何弃用经典的Ajax,选择自研Axios()
- vue|vue3替代vuex的框架piniajs实例教程
- cmd配置npm仓库镜像报错