<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: '一級',
         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'
          }
        },'刪除')
      ])
    }
   }
  }
</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}，一個HTML標簽字符串，組件選項對象，或解析任何一種的一個async異步函數(shù)，必需參數(shù)。
    'el-button',
   //參數(shù)2：{Object} 一個包含模板相關屬性的數(shù)據對象，可以在template中使用這些特性，可選參數(shù)
   {},
   //參數(shù)3： {String | Array},如果直接是字符串則會生成“文本虛擬節(jié)點；如果是數(shù)組，則可以在數(shù)組中，則可以生成子虛擬節(jié)點
    '刪除'
  )

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