快捷導(dǎo)航

vue Treeselect下拉樹只能選擇第N級元素實現(xiàn)代碼

更新時間：2020年08月31日 15:55:55 作者：豆子麻麻

這篇文章主要介紹了vue Treeselect下拉樹只能選擇第N級元素實現(xiàn)代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

今天在項目中遇到一個需求，就是vue下拉樹只能選擇第三級選項，為了解決這個問題，查閱了官方文檔

https://vue-treeselect.js.org/#disable-item-selection

然后看到isDisabled屬性可以禁止選擇，具體實現(xiàn)代碼如下：

<treeselect 
  :disable-branch-nodes="true"
  :normalizer="normalizer" 
  v-model="formData.goodsTypeId" 
  :multiple="false" 
  :options="goodsType" 
  placeholder='請選擇'>
  <label slot="option-label" slot-scope="{ node, shouldShowCount, count, labelClassName, 
   countClassName }">
     {{ node.label }}
  </label>
</treeselect>

如何給數(shù)據(jù)添加isDisabled屬性呢？

自己嘗試著在下拉樹配置中添加了一下，竟然成功了

【提示】node這個對象包含的字段打印了一下，(這些數(shù)據(jù)是后臺接口提供的)如下圖展示：

【isLeaf】Y是葉子節(jié)點，N是分支節(jié)點【typeLevel】第？級

normalizer(node) {
  //去掉children=[]的children屬性
  if(node.children && !node.children.length) {
   delete node.children;
  }
  if(node.isLeaf=='Y' && node.typeLevel!=3){
   node['isDisabled'] = true;
  }
  return {
   id: node.typeId,
   label: node.typeName,
   children: node.children,
  }       
},

補充知識：Vue ElementUI使用el-tree，只容許葉子結(jié)點有多選框

在使用el-tree時，我們需要多選功能會在el-tree標簽添加show-checkbox屬性：

那么，有時會遇到這樣的需求，父節(jié)點不讓多選，只容許多選葉子結(jié)點。那么，這時我們改怎么做呢？

通過調(diào)試工具：

多選框就是.el-checkbox這個樣式，那么我們只需把這個樣式覆蓋一下，把它隱藏掉：

/deep/ .el-tree-node{
   .is-leaf + .el-checkbox .el-checkbox__inner{
     display: inline-block;
   }
   .el-checkbox .el-checkbox__inner{
     display: none;
   }
 }

注意：/deep/ 是強穿透，也可以寫成<<< ，只在當前組件文件起作用，不改變整個頁面樣式。

最后別忘了在el-tree組件加上 :check-strictly="true" 是否嚴格的遵循父子不互相關(guān)聯(lián)的做法

以上這篇vue Treeselect下拉樹只能選擇第N級元素實現(xiàn)代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue el-date-picker動態(tài)限制時間范圍案例詳解
這篇文章主要介紹了vue el-date-picker動態(tài)限制時間范圍案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下
2021-09-09
vue使用axios的小技巧分享
這篇文章主要為大家詳細介紹了一些vue使用axios的小技巧,文中的示例代碼講解詳細,對我們深入掌握vue有一定的幫助,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-10-10
vue實現(xiàn)數(shù)字動態(tài)翻牌的效果（開箱即用）
這篇文章主要介紹了vue實現(xiàn)數(shù)字動態(tài)翻牌的效果（開箱即用）,實現(xiàn)原理是激將1到9的數(shù)字豎直排版，通過translate移動位置顯示不同數(shù)字，本文通過實例代碼講解，需要的朋友可以參考下
2019-12-12
vue子組件獲取到它父組件數(shù)據(jù)的4種方法
這篇文章主要給大家介紹了關(guān)于vue子組件獲取到它父組件數(shù)據(jù)的4種方法,對于vue來說組件之間的消息傳遞是非常重要的,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下
2023-08-08
vue項目本地開發(fā)完成后部署到服務(wù)器后報404錯誤解決方案
很多時候我們發(fā)現(xiàn)辛辛苦苦寫的VueJs應(yīng)用經(jīng)過打包后在自己本地搭建的服務(wù)器上測試沒有什么問題,但真正放在服務(wù)器上后會發(fā)現(xiàn)或多或少的問題,這篇文章主要給大家介紹了關(guān)于vue項目本地開發(fā)完成后部署到服務(wù)器后報404錯誤的解決方案,需要的朋友可以參考下
2024-01-01
Element Card 卡片的具體使用
這篇文章主要介紹了Element Card 卡片的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
用 Vue.js 遞歸組件實現(xiàn)可折疊的樹形菜單(demo)
通過本文給您演示一下如何有效地使用遞歸組件，我將通過建立一個可擴展/收縮的樹形菜單的來一步步進行。下面通過本文給大家分享用 Vue.js 遞歸組件實現(xiàn)可折疊的樹形菜單，需要的朋友參考下吧
2017-12-12
Vue中對watch的理解(關(guān)鍵是immediate和deep屬性)
watch偵聽器，是Vue實例的一個屬性，是用來響應(yīng)數(shù)據(jù)的變化，需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時，這個方式是最有用的，這篇文章主要介紹了Vue中對watch的理解,需要的朋友可以參考下
2022-11-11
如何在Vue3中使用視頻庫Video.js實現(xiàn)視頻播放功能
在Vue3項目中集成Video.js庫,可以創(chuàng)建強大的視頻播放功能,這篇文章主要介紹了如何在Vue3中使用視頻庫Video.js實現(xiàn)視頻播放功能,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-09-09
vue3+element-plus動態(tài)路由菜單示例代碼
這篇文章主要介紹了vue3+element-plus動態(tài)路由菜單示例代碼,代碼簡單易懂,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-11-11