선택한 노드의 ID 및 레이블 작업을 얻기 위한 vue Treeselect 트리 드롭다운 상자

【관련 학습 권장사항: 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: 카테고리 수 표시

관련 학습 추천: 프로그래밍 비디오

위 내용은 선택한 노드의 ID 및 레이블 작업을 얻기 위한 vue Treeselect 트리 드롭다운 상자의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!