溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

使用vue實現(xiàn)監(jiān)聽 Treeselect 選擇項的改變的方法

發(fā)布時間：2020-11-05 17:06:42 來源：億速云 閱讀：3653 作者：Leah 欄目：開發(fā)技術(shù)

本篇文章給大家分享的是有關(guān)使用vue實現(xiàn)監(jiān)聽 Treeselect 選擇項的改變的方法，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

項目中使用 Treeselect 時，需要獲取選項的變化從而觸發(fā)別的事件，所以需要監(jiān)聽Treeselect 所選擇的值。

我使用了watch 來監(jiān)聽 treeselect 綁定的 model ，如果 model 的值發(fā)生變化就觸發(fā) currDeptChange 事件。

<el-form-item prop="deptId"
          :label="$t('deviceManage.device.table.deptId')+':'">
    <treeselect :options="deptTree"
          :normalizer="normalizer"
          v-model="formData.deptId"
          :placeholder="$t('deviceManage.device.dlg.deptId')">
    </treeselect>
</el-form-item>

監(jiān)聽 Treeselect 選擇項的改變

watch: {
  // 監(jiān)聽deptId
  'formData.deptId': 'currDeptChange'
},
methods: {
  currDeptChange(val) {
   console.log('currDeptChange', val)
   if (val) {
    this.queryStaff()
   }
  },
  queryStaff() {}
}

補(bǔ)充知識：vue Treeselect 樹形下拉框 : 獲取選中節(jié)點(diǎn)的ids和lables

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

1.ids: 即value

1.lable: 需要用到方法：@select(node,instanceId) 和 @deselect(node,instanceId)

使用vue實現(xiàn)監(jiān)聽 Treeselect 選擇項的改變的方法

<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 '@riophae/vue-treeselect'
 // import the styles
 import '@riophae/vue-treeselect/dist/vue-treeselect.css' 
 
 export default {
  components: { Treeselect },
  data() {
   return {
    
    DRHA_EFaultModeTree_value: null,
    DRHA_EFaultModeTree_lables: [],
    DRHA_EFaultModeTree_options: [ {
     id: '1',
     label: 'Fruits',
     children: [ {
      id: '1-1',
      label: 'Apple &#63;',
      isNew: true,
     }, {
      id: '1-2',
      label: 'Grapes &#63;',
     }, {
      id: '1-3',
      label: 'Pear &#63;',
     }, {
      id: '1-4',
      label: 'Strawberry &#63;',
     }, {
      id: 'watermelon',
      label: 'Watermelon &#63;',
     } ],
    }, {
     id: 'vegetables',
     label: 'Vegetables',
     children: [ {
      id: 'corn',
      label: 'Corn &#63;',
     }, {
      id: 'carrot',
      label: 'Carrot &#63;',
     }, {
      id: 'eggplant',
      label: 'Eggplant &#63;',
     }, {
      id: 'tomato',
      label: 'Tomato &#63;',
     } ],
    } ],
   };
  },
  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實現(xiàn)監(jiān)聽 Treeselect 選擇項的改變的方法，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手