首頁 > web前端 > js教程 > vue Treeselect樹形下拉方塊之取得選取節點的ids和lables操作

vue Treeselect樹形下拉方塊之取得選取節點的ids和lables操作

coldplay.xixi
發布: 2020-08-17 17:15:49
轉載
4692 人瀏覽過

vue Treeselect樹形下拉方塊之取得選取節點的ids和lables操作

【相關學習推薦: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 下拉樹選擇問題總結

##情況:

解決方法:

截圖:

問題二:只能選擇最小分類

如圖:

#問題三:顯示分類的數量

#相關學習推薦:

程式設計影片

以上是vue Treeselect樹形下拉方塊之取得選取節點的ids和lables操作的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
vue
來源:jb51.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板