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

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

然後看到isDisabled屬性可以禁止選擇，具體實現程式碼如下：

<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>

如何給資料新增isDisabled屬性呢？

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

【提示】node這個物件包含的欄位列印了一下，(這些資料是後臺介面提供的)如下圖展示：

【isLeaf】Y是葉子節點，N是分支節點【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，只容許葉子結點有多選框

在使用el-tree時，我們需要多選功能會在el-tree標籤新增show-checkbox屬性：

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

通過除錯工具：

多選框就是.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" 是否嚴格的遵循父子不互相關聯的做法

以上這篇vue Treeselect下拉樹只能選擇第N級元素實現程式碼就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。