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);

        }

      }

    }),

  ]);

},

参考图片：