今天小编就为大家分享一篇浅谈Vue render函数在ElementUi中的应用，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue的render函数在日常开发中被广泛应用，今天以ElementUI中的table表头重构为引，实际应用一下借助render函数实现表头搜索，不足之处请多多指教！
首先引入官方demo
实现效果
之后为姓名列添加 :render-header=”renderHeader” 绑定render函数
在methods中实现renderHeader方法
methods: { renderHeader (createEleme<mark style="color:transparent">来4源gaodaimacom搞#代%码*网</mark>nt) { let self = this return createElement('div', { domProps: { innerHTML: ` <span class="span">姓名</span> ` }, style: { padding: '0', lineHeight: '1', marginTop: '5px', width: '100%' }, 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() } } }) } },
在less文件中配合实现DOM的展示和隐藏
.span { display: inline-block; } .input { display: none; }
此时已经可以实现点击表头出现输入框
之后需要为其绑定input事件
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，实现一些列业务逻辑
watch: { inputValue: function () { console.log(this.inputValue) } }
以上就是浅谈Vue render函数在ElementUi中的应用的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：浅谈Vue render函数在ElementUi中的应用
转载请注明原文链接：浅谈Vue render函数在ElementUi中的应用
