Vueの+要素ツリーデータテーブル

 

テンプレートセクション

 　　　　　　唯一の編集を表示し、ツリー構造でボタンを削除

　　　　　　ここで私は単純にアクション列で判定ならば、vは-、この分野のレベルがあるかどうかを判断するために作られました

< DIV > 
    < EL-テーブル
       ：データ= "たtableData" 
      スタイル= "幅：100％;マージン下：20ピクセル;" 
      行キー= "ID" 
      ：ツリー小道具= "{子供： '子供'、hasChildren： 'hasChildren'}" 
    > 
      < EL-テーブル列
         V-ため= "TABLELISTで（項目、インデックス）" 
        ：キー= "インデックス" 
        ：ラベル= "item.label" 
        ：プロペラ= "item.prop" 
      > </ EL-テーブル列> 
      < EL-テーブル列ラベル= "操作"
        スロットスコープ= "範囲" > 
          < EL-ボタン
             @click = "handleClick（scope.row）" 
            タイプ= "プライマリ" 
            サイズ= "ミニ" 
            V-IF = "！scope.row.date" 
          >编辑</ EL -button > 
          < EL-ボタン
             @click = "downloadImg（scope.row）" 
            タイプ= "テキスト" 
            サイズ= "小さな" 
            V-IF = "！scope.row.date" 
          >删除</ EL-ボタン> 
        </ テンプレート> 
      </ エル・テーブルのカラム> 
    </ エル・テーブル> 
  </ DIV >

タイトルや小道具のデータをレンダリングするために必要なデータに相当するDOMノードはそんなに（メンテナンス）を記述する必要はありませんTABLELISTオブジェクトの配列の一部として書き込まれたデータ、

                 データは、テーブル内のデータである子どもたちが存在する場合、そのデータ要素のテーブルが存在しますたtableDataは、ドロップダウンのアイコンで表示されます

データ（）{
     リターン{ 
      TABLELIST：[ 
        { 
          ラベル： "レベル" 、
          プロペラ： "DATE" 
        }、
        { 
          ラベル： "名前" 、
          小道具： "名前" 
        }、
        { 
          ラベル： "エイリアス" 、
          プロペラ： "エイリアス" 
        } 、
        { 
          ラベル： "オペレータ" 、
          プロペラ： "演算子" 
        }、
        { 
          ラベル： "状態" 、
          ："状態" 
        } 
      ]、
      TABLEDATA：[ 
        { 
          ID： 1 、
          DATE： "個人" 、
          子供：[ 
            { 
              ID： 11は、
              名称： "ルート後半パッケージ" 、
              別名： "兄弟切断する" 、
              演算子： "Tieshou執拗な" 、
              状態： "痛み" 
            } 
          ] 
        }、
        { 
          ID： 2 、
          DATE： "部署" 、
          子供：[] 
        }、

        { 
          ID： 3 、
          DATE： "病院" 、
          子供：[ 
            { 
              ID： 31である、
              名称： "ルート後半パッケージ" 、
              別名： "兄弟切断する" 、
              オペレータ：「アイアン執拗な手「
              状態：」無痛「は
            }、
            { 
              IDは： 41である、
              名称：」ルート後半パッケージ「
              別名：」 "兄弟を切断することです、
              オペレータ： "執拗な金属手" 、
              状態： "痛みなし" 
            } 
          ] 
        } 
      ] 
    }; 
  }