在element-ui的el-tree组件中用render函数生成el-button的实例代码

<template>
  <el-tree
      :data=\"treeData\"
      :props=\"defaultProps\"
      show-checkbox
      node-key=\"id\"
      default-expand-all
      :expand-on-click-node=\"false\"
      :render-content=\"renderContent\">
  </el-tree>
</template>
< >
  export default {
   name: \'tree\',
   data:function(){
     return {
       treeData: [{
         id: 1,
         label: \'一级\',
         code:\'1\',
         children: [{
           id: 4,
           label: \'二级\',
           code:\'1-1\',
           children: [{
             id: 9,
             label: \'三级\',
             code:\'1-1-1\',
           }, {
             id: 10,
             label: \'三级\',
             code: \'1-1-2\',
           }]
         }]
       }],
       defaultProps: {
         children: \'children\',
         label: \'label\'
       }
     }
   },
   methods:{
    renderContent:function(h,data){
      return h(\'span\',{},[
        h(\'span\',data.data.label+\":\"),
        h(\"span\",{
          class:\'leftSpan\',
          domProps:{
            innerHTML:data.data.code
          }
        }),
        h(\"el-button\",{
          class:\'floatSpan\',
          props:{
            type:\'danger\'
          }
        },\'删除\')
      ])
    }
   }
  }
</ >
<style>
 .leftSpan{
   color: dodgerblue;
   margin-left: 15px;
 }
 .floatSpan{
   float: right;
   margin-top: 8px;
   margin-right: 10px;
   padding: 5px;
 }
 .el-tree {
   width: 33%;
   margin: 92px auto;
 }
</style>

 renderContent:function(h,data){
      return h(\'span\',{},[
        h(\'span\',data.data.label+\":\"),
        h(\"span\",{
          class:\'leftSpan\',
          domProps:{
            innerHTML:data.data.code
          }
        }),
        h(\"el-button\",{
          class:\'floatSpan\',
          props:{
            type:\'danger\'
          }
        },\'删除\')
      ])
    }

 h(
   //参数1：{String |   | Function}，一个HTML标签字符串，组件选项对象，或解析任何一种的一个async异步函数，必需参数。
    \'el-button\',
   //参数2：{ } 一个包含模板相关属性的数据对象，可以在template中使用这些特性，可选参数
   {},
   //参数3： {String | Array},如果直接是字符串则会生成“文本虚拟节点；如果是数组，则可以在数组中，则可以生成子虚拟节点
    \'删除\'
  )

{
 // 和`v-bind:class`一样的 API
 // 接收一个字符串、对象或字符串和对象组成的数组
 \'class\': {
  foo: true,
  bar: false
 },
 // 和`v-bind:style`一样的 API
 // 接收一个字符串、对象或对象组成的数组
 style: {
  color: \'red\',
  fontSize: \'14px\'
 },
 // 普通的 HTML 特性
 attrs: {
  id: \'foo\'
 },
 // 组件 props
 props: {
  myProp: \'bar\'
 },
 // DOM 属性
 domProps: {
  innerHTML: \'baz\'
 },
 // 事件监听器基于 `on`
 // 所以不再支持如 `v-on:keyup.enter` 修饰器
 // 需要手动匹配 keyCode。
 on: {
  click: this.clickHandler
 },
 // 仅用于组件，用于监听原生事件，而不是组件内部使用
 // `vm.$emit` 触发的事件。
 nativeOn: {
  click: this.nativeClickHandler
 },
 // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
 // 赋值，因为 Vue 已经自动为你进行了同步。
 directives: [
  {
   name: \'my-custom-directive\',
   value: \'2\',
    : \'1 + 1\',
   arg: \'foo\',
   modifiers: {
    bar: true
   }
  }
 ],
 // 作用域插槽格式
 // { name: props => VNode | Array<VNode> }
 scopedSlots: {
  default: props => createElement(\'span\', props.text)
 },
 // 如果组件是其他组件的子组件，需为插槽指定名称
 slot: \'name-of-slot\',
 // 其他特殊顶层属性
 key: \'myKey\',
 ref: \'myRef\',
 // 如果你在渲染函数中向多个元素都应用了相同的 ref 名，
 // 那么 `$refs.myRef` 会变成一个数组。
 refInFor: true
}