elementui のツリー コンポーネントはコードをどのように使用してノードの展開状態を変更しますか

問題:プロジェクトでは、ツリー ノードをクリックせずにツリー ノードを展開する必要があります。公式ドキュメントでは、デフォルトの展開属性 (default-expanded-keys) のみが提供されています。この属性は配列を受け取り、配列はアイテムを展開しますが、これは最初にのみ役に立ち、後で特定のノードを展開する方法はありません。

解決策:公式のメソッドではノードを展開する方法が提供されていないため、方法を見つける必要があります。ここでは、各ノードの ID を設定し、この ID を通じて dom 要素を取得し、クリック メソッドを実行してクリック効果をシミュレートします。 。コードは以下のように表示されます。

HTMLパートコード:

<el-tree
  :data="treeData"
>
  <span :id="data.id" class="custom-tree-node"  slot-scope="{node,data}">
    <span style="line-height:32px;">{
   
   {node.label}}</span>
  </span>
</el-tree>

コードの js 部分:

data(){
    
    
  return {
    
    
	treeData:[
	  {
    
    
		id:1,
		label:'节点1',
		children:[
		  {
    
    
		  	id:2,
		  	label:'节点1-1',
		  },
		  {
    
    
		  	id:3,
		  	label:'节点1-2'
		  }
		]
	  }
	]
  }
}
mounted(){
    
    
  docoument.getElementById('1').click();
}

このようにノード 1 が自動的に展開されていることが分かりますが、特定のノードの展開状態を変更したい場合は document.getElementById(id).click() のメソッドを使用します。