図VUE要素のスタイルのデータ構造を変更します

<テンプレート> 
  の<divクラス= "weChatToken"> 
      <EL- ツリー
        ：小道具 = "defaultProps" 
        ：データ = "treeData" 
        ：拡大 -onクリック-ノード= "false"に
      > 
        <スパンクラス= "カスタムツリーノード"スロットスコープ=" {ノード、データ} "> 
          <スパン> {{node.label}} </スパン> 
          <スパンスタイル="マージン左：15ピクセル; "> 
            <EL-ボタン型="テキスト」サイズ= "小" @click = "（）=>追加（データ）"> 
              <I CLASS = "EL-アイコンプラス"> </ I> 
            </ EL-ボタン> 
            <EL-ボタン型= "テキスト"サイズ= "小" @click = "（）=>削除（データノード）"> EL-ボタン型= "テキスト"サイズ= "小" @click = "（）=>削除（データノード）"> 
              <Iクラス= "EL-アイコン削除"> </ I>
            </ EL-ボタン> 
            <EL-ボタン型= "テキスト"サイズ= "小" @click = "（）=>変更（データ）"> 
              <I CLASS = "EL-アイコン編集"> </ I> 
            </ EL-ボタン> 
          </ span>を
        </ span>を
      </エル・ツリー> 
  </ div> 
</テンプレート> 

<スクリプト> 
輸出デフォルト{ 
  データ（）{ 
    リターン{ 
      {：defaultProps 
        子供：「子供、
        ラベル： 'ラベル' 
      }、
      treeData：[]、
      defaultExpandedKeys：[] 
    }。
  }、
  メソッド：{ 
    // 要求インタフェースデータ
= .treeData [{ 
        ID： 1 、
        ラベル： '1' 、
        子供：[{ 
          ID： 4 、
          ラベル： '二1-1' 、
          子供：[{ 
            ID： 9 、
            ラベル：「3 1- 1-1 ' 
          }、{ 
            ID： 10 、
            ラベル： ' 3 1-1-2 ' 
          }] 
        }] 
      }、{ 
        ID： 2 、
        ラベル： ' 2 'の、
        子供：[{ 
          ID： 5、
          ラベル： "二2-1 ' 
        }、{ 
          ID： 6 、
          ラベル： "二2-2' 
        }] 
      }、{ 
        ID： 3 、
        ラベル： 3 '' 、
        子供：[{ 
          ID： 7。 、
          ラベル： "二3-1 ' 
        }、{ 
          ID： 8。 、
          ラベル： "二3-2' 
        }] 
      }]; 
    } 
    // 追加
    追記（データ）{
      console.log（データ）。
    } 
    // 删除
    除去（ノードデータ）{ 
      にconsole.log（ノードデータ）。
    } 
    // 编辑
    （データ）{修正
      はconsole.log（データ）。
    }、
  }、
  作成（）{ 
    この.query（）。
  } 
}。
</ SCRIPT> 

<スタイルのlang = "少ない"スコープ> 
.weChatToken {
   /ディープ/ .EL-TREE- ノード{ 
    位置：相対。
    パディング - 左：16pxに; 
  }
   /ディープ/ .EL-TREE- node__children { 
    パディング - 左：16pxに。
  }
   /ディープ/ .ELツリーノード：直前に入って子：{前に
    高さ：38px; 
  }
  /ディープ/ .ELツリー> .EL-TREE- ノード：前{ 
    ボーダー - 左：なし。
  }
   /ディープ/ .ELツリー> .EL-TREE- ノード：{後
    ボーダー - 上部：なし。
  }
   /ディープ/ .ELツリーノード：前に、/ディープ/ .EL-TREE- ノード：{後に
    内容： "" 。
    左： - 4PX。
    位置：絶対; 
    右：自動; 
    ボーダー - 幅：1ピクセル。
  }
   /ディープ/ .tree：最初の子.EL-TREE- ノード：{前
    のボーダー - 左：なし。
  }
   /ディープ/ .EL-TREE- ノード：{前
    ボーダー - 左：1ピクセル固体＃1 4386c6と、
    下：0PX。
    高さ： 100％; 
    トップ： - 25ピクセル; 
    幅：1ピクセル。
  }
   /ディープ/ .EL-TREE- ノード：{後
    ボーダー - トップ：1ピクセル固体＃1 4386c6。
    高さ：20ピクセル; 
    トップ：12ピクセル; 
    幅：は24px; 
  }
   /深い/ .EL-TREE- node__content { 
    パディング -left：0PX！重要; 
  }
   /ディープ/ .EL-ツリーnode__content> .EL-ツリーnode__expand- アイコン{ 
      パディング：3px。
  } 
}
 </スタイル>