<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>
<script>
  export default {
   name: 'tree',
   data:function(){
     return {
       treeData: [{
         id: 1,
         label: '一級(jí)',
         code:'1',
         children: [{
           id: 4,
           label: '二級(jí)',
           code:'1-1',
           children: [{
             id: 9,
             label: '三級(jí)',
             code:'1-1-1',
           }, {
             id: 10,
             label: '三級(jí)',
             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'
          }
        },'刪除')
      ])
    }
   }
  }
</script>
<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(
   //參數(shù)1：{String | Object | Function}，一個(gè)HTML標(biāo)簽字符串，組件選項(xiàng)對(duì)象，或解析任何一種的一個(gè)async異步函數(shù)，必需參數(shù)。
    'el-button',
   //參數(shù)2：{Object} 一個(gè)包含模板相關(guān)屬性的數(shù)據(jù)對(duì)象，可以在template中使用這些特性，可選參數(shù)
   {},
   //參數(shù)3： {String | Array},如果直接是字符串則會(huì)生成“文本虛擬節(jié)點(diǎn)；如果是數(shù)組，則可以在數(shù)組中，則可以生成子虛擬節(jié)點(diǎn)
    '刪除'
  )

{
 // 和`v-bind:class`一樣的 API
 // 接收一個(gè)字符串、對(duì)象或字符串和對(duì)象組成的數(shù)組
 'class': {
  foo: true,
  bar: false
 },
 // 和`v-bind:style`一樣的 API
 // 接收一個(gè)字符串、對(duì)象或?qū)ο蠼M成的數(shù)組
 style: {
  color: 'red',
  fontSize: '14px'
 },
 // 普通的 HTML 特性
 attrs: {
  id: 'foo'
 },
 // 組件 props
 props: {
  myProp: 'bar'
 },
 // DOM 屬性
 domProps: {
  innerHTML: 'baz'
 },
 // 事件監(jiān)聽(tīng)器基于 `on`
 // 所以不再支持如 `v-on:keyup.enter` 修飾器
 // 需要手動(dòng)匹配 keyCode。
 on: {
  click: this.clickHandler
 },
 // 僅用于組件，用于監(jiān)聽(tīng)原生事件，而不是組件內(nèi)部使用
 // `vm.$emit` 觸發(fā)的事件。
 nativeOn: {
  click: this.nativeClickHandler
 },
 // 自定義指令。注意，你無(wú)法對(duì) `binding` 中的 `oldValue`
 // 賦值，因?yàn)?Vue 已經(jīng)自動(dòng)為你進(jìn)行了同步。
 directives: [
  {
   name: 'my-custom-directive',
   value: '2',
   expression: '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',
 // 如果你在渲染函數(shù)中向多個(gè)元素都應(yīng)用了相同的 ref 名，
 // 那么 `$refs.myRef` 會(huì)變成一個(gè)數(shù)組。
 refInFor: true
}