本篇文章给大家分享的是有关render函数如何ElementUi中应用，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
成都创新互联专注于企业
成都全网营销、网站重做改版、肃宁网站定制设计、自适应品牌网站建设、
H5响应式网站、
成都做商城网站、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为肃宁等各大城市提供网站开发制作服务。
首先引入官方demo
实现效果
之后为姓名列添加 :render-header=”renderHeader” 绑定render函数
在methods中实现renderHeader方法
methods: {
renderHeader (createElement) {
let self = this
return createElement('div', {
domProps: {
innerHTML: `
姓名
`
},
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)
}
}以上就是render函数如何ElementUi中应用，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。
文章标题：render函数如何ElementUi中应用-创新互联
当前路径：
http://cdkjz.cn/article/ccsgoi.html
