vue Treeselect tree drop-down box to obtain the ids and labels operations of the selected node

【Related learning recommendations: js video tutorial】

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

1.ids: That is value

1.lable: Need to use methods: @select(node,instanceId) and @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>

Supplementary knowledge:vue Treeselect drop-down tree selection problem summary

Situation:

Solution:

Screenshot:

Problem 2: Only the smallest one can be selected Classification

##As shown in the picture:

Question 3: Display the number of categories

Related learning recommendations:

Programming video

The above is the detailed content of vue Treeselect tree drop-down box to obtain the ids and labels operations of the selected node. For more information, please follow other related articles on the PHP Chinese website!