vue Trees 選択したノードの ID とラベルの操作を取得するためのツリー選択ドロップダウン ボックス

【関連する学習に関する推奨事項: js ビデオ チュートリアル】

API: https://vue-treeselect.js.org/#events

1.ids: それは value

1.lable: メソッドを使用する必要があります: @select(node,instanceId) および @deselect(node,instanceId)

#

<template>
<treeselect ref="DRHA_EFaultModeTree"
    v-model="DRHA_EFaultModeTree_value"
    :multiple="true" 
    :options="DRHA_EFaultModeTree_options"
    :flat="true"
    :show-count="true"
    :disable-branch-nodes="true"
    :searchable="false"
    @select="DRHA_EFaultModeTree_handleSelect"
    @deselect="DRHA_EFaultModeTree_handleDeSelect"
    placeholder=" 请选择..."/>
 
 <p>lables：{{DRHA_EFaultModeTree_lables}}</p>
 <p>ids:{{DRHA_EFaultModeTree_value}}</p>
 
</template>
 
<script>
 // import the component
 import Treeselect from &#39;@riophae/vue-treeselect&#39;
 // import the styles
 import &#39;@riophae/vue-treeselect/dist/vue-treeselect.css&#39;
 
 
 export default {
 components: { Treeselect },
 data() {
  return {
  
  DRHA_EFaultModeTree_value: null,
  DRHA_EFaultModeTree_lables: [],
  DRHA_EFaultModeTree_options: [ {
   id: &#39;1&#39;,
   label: &#39;Fruits&#39;,
   children: [ {
   id: &#39;1-1&#39;,
   label: &#39;Apple ?&#39;,
   isNew: true,
   }, {
   id: &#39;1-2&#39;,
   label: &#39;Grapes ?&#39;,
   }, {
   id: &#39;1-3&#39;,
   label: &#39;Pear ?&#39;,
   }, {
   id: &#39;1-4&#39;,
   label: &#39;Strawberry ?&#39;,
   }, {
   id: &#39;watermelon&#39;,
   label: &#39;Watermelon ?&#39;,
   } ],
  }, {
   id: &#39;vegetables&#39;,
   label: &#39;Vegetables&#39;,
   children: [ {
   id: &#39;corn&#39;,
   label: &#39;Corn ?&#39;,
   }, {
   id: &#39;carrot&#39;,
   label: &#39;Carrot ?&#39;,
   }, {
   id: &#39;eggplant&#39;,
   label: &#39;Eggplant ?&#39;,
   }, {
   id: &#39;tomato&#39;,
   label: &#39;Tomato ?&#39;,
   } ],
  } ],
  };
 },
 mounted: function(){
  
 },
 methods: {
  DRHA_EFaultModeTree_handleSelect(node,instanceId){
  console.log("Select");
  this.DRHA_EFaultModeTree_lables.push(node.label);
  },
  DRHA_EFaultModeTree_handleDeSelect(node,instanceId){
  console.log("DeSelect");
  for (let i = 0;i<this.DRHA_EFaultModeTree_lables.length;i++){
   if(node.label == this.DRHA_EFaultModeTree_lables[i]){
   this.DRHA_EFaultModeTree_lables.splice(i,1);
   }
  }
  },
 }
 };
</script>

補足知識:vue Treeselect ドロップダウン ツリー選択問題の概要

状況:

解決策:

スクリーンショット:

問題 2:最も小さいものを選択できます。 分類

##図に示すように:

#質問 3: カテゴリの数を表示

関連する学習に関する推奨事項:

プログラミング ビデオ

以上がvue Trees 選択したノードの ID とラベルの操作を取得するためのツリー選択ドロップダウン ボックスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。