溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關vue 中的Treeselect下拉樹是不是只可以選擇第N級元素，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
今天在項目中遇到一個需求，就是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級元素有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
