Render函数是vue2.x 新增的一个函数、主要用来提升节点的性能，它是基于JavaScript计算。使用Render函数将template里面的节点解析成虚拟的dom。
前期在使用 iview 和 element 树形控件时，想要在节点的前面加上光标、后面加上编辑按钮，找遍所有的 API 都没有找到对应设置方法，只看到了rendoerContent 函数，发现此函数可以使用想要功能，render-content 函数仔细研究了一番，发现不仅好用，并且灵活。
本例使用 vue + element 实现
例子1：在树的每个节点后面添加上编辑按钮。
renderContent (createElement, { node, data, store }) {
var self = this;
return createElement('span', [
// 显示树的节点信息
createElement('span', node.label),
// 在属性节点后后面添加一个“ + ” 和 “ - ”
createElement('span',{
attrs:{
style:"margin-left:150px"
},
domProps: {
innerHTML: "<i class=\"el-icon-circle-plus\"></i>"
},
on: {
click(){
// 添加子节点
console.info("点击了节点" + data.id + "的添加按钮");
store.append({ id: self.baseId++, label: 'testtest', children: [] }, data);
}
}
}),
createElement('span',{
attrs:{
style:"margin-left:10px"
},
domProps: {
innerHTML: "<i class=\"el-icon-delete\" style=></i>"
},
on: {
click(){
// 删除子节点
console.info("点击了节点" + data.id + "的删除按钮");
store.remove(data);
}
}
}),
]);
},
例二：通过判断节点的深度，显示不同的光标
renderContent (createElement, { node, data, store }) {
var self = this;
// 通过判断，在第5 层之后只显示 “ + ” 和 节点信息
if (data.deep > 4) {
return createElement('span', [
// 显示树的节点信息
createElement('span', node.label),
// 设备后面删除光标的响应函数
createElement('span',{
attrs:{
style:"margin-left:10px"
},
domProps: {
innerHTML: "<i class=\"el-icon-delete\" style=></i>"
},
on: {
click(){
// 删除子节点
console.info("点击了节点" + data.id + "的删除按钮");
store.remove(data);
}
}
}),
]);
}
//通过对应节点显示对应的信息
return createElement('span', [
// 显示树的节点信息
createElement('span', node.label),
createElement('span',{
attrs:{
style:"margin-left:150px"
},
domProps: {
innerHTML: "<i class=\"el-icon-circle-plus\"></i>"
},
on: {
click(){
// 添加子节点
console.info("点击了节点" + data.id + "的添加按钮");
store.append({ id: self.baseId++, label: 'testtest', children: [] }, data);
}
}
}),
createElement('span',{
attrs:{
style:"margin-left:10px"
},
domProps: {
innerHTML: "<i class=\"el-icon-delete\" style=></i>"
},
on: {
click(){
// 删除子节点
console.info("点击了节点" + data.id + "的删除按钮");
store.remove(data);
}
}
}),
]);
},
参考图片：
