element treeカスタムアイコンカスタムコンポーネント

次の内容はelementの公式ドキュメントから来ています.
ツリーノードのコンテンツのカスタマイズは、render-contentとscoped slotの2つの方法で行うことができます.render-contentを使用してレンダリング関数を指定します.この関数は、必要なノード領域の内容を返します.レンダー関数の使い方は、Vueドキュメントを参照してください.scoped slotを使用すると、現在のノードのノードオブジェクトと現在のノードのデータを表す2つのパラメータnodeとdataが入力されます.注:jsfiddleはJSX構文をサポートしていないため、render-contentの例はjsfiddleでは実行できません.しかし実際のプロジェクトでは,相関依存を正しく構成すれば正常に動作する.

  

    
   render-content
    
    
  
  

    
   scoped slot
    
      
        {{ node.label }}
        
           append(data)">
            Append
          
           remove(node, data)">
            Delete
          
        
      
    
  



  let id = 1000;

  export default {
    data() {
      const data = [{
        id: 1,
        label: '   1',
        children: [{
          id: 4,
          label: '   1-1',
          children: [{
            id: 9,
            label: '   1-1-1'
          }, {
            id: 10,
            label: '   1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '   2',
        children: [{
          id: 5,
          label: '   2-1'
        }, {
          id: 6,
          label: '   2-2'
        }]
      }, {
        id: 3,
        label: '   3',
        children: [{
          id: 7,
          label: '   3-1'
        }, {
          id: 8,
          label: '   3-2'
        }]
      }];
      return {
        data: JSON.parse(JSON.stringify(data)),
        data: JSON.parse(JSON.stringify(data))
      }
    },

    methods: {
      append(data) {
        const newChild = { id: id++, label: 'testtest', children: [] };
        if (!data.children) {
          this.$set(data, 'children', []);
        }
        data.children.push(newChild);
      },

      remove(node, data) {
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
      },

      renderContent(h, { node, data, store }) {
        return (
          <span class="custom-tree-node">
            <span>{node.label}</span>
            <span>
              <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>
              <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
            </span>
          </span>);
      }
    }
  };