vue的render函数在日常开发中被广泛应用，今天以ElementUI中的table表头重构为引，实际应用一下借助render函数实现表头搜索，不足之处请多多指教！
首先引入官方demo
rush:js;">
实现效果
之后为姓名列添加 :render-header=”renderHeader” 绑定render函数
rush:js;">
在methods中实现renderHeader方法
rush:js;">
methods: {
renderHeader (createElement) {
let self = this
return createElement('div',{
domProps: {
innerHTML: `
display = 'none'
input.style.display = 'inline-block'
input.focus()
event.stopPropagation()
}
}
})
}
},
在less文件中配合实现DOM的展示和隐藏
此时已经可以实现点击表头出现输入框
之后需要为其绑定input事件
rush:js;">
on: {
'!click': function (e) {
let span = document.getElementsByClassName('span')[0]
let input = document.getElementsByClassName('input')[0]
span.style.display = 'none'
input.style.display = 'inline-block'
input.focus()
event.stopPropagation()
},input: function (event) {
self.inputValue = event.target.value // 在data中定义inputValue
}
}
之后我们就可以监听data中的inputValue，实现一些列业务逻辑
rush:js;">
watch: {
inputValue: function () {
console.log(this.inputValue)
}
}
以上这篇浅谈Vue render函数在ElementUi中的应用就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。
原文地址：https://www.jb51.cc/elementui/30407.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
