vue Treeselect下拉樹只能選擇第N級(jí)元素實(shí)現(xiàn)代碼
今天在項(xiàng)目中遇到一個(gè)需求，就是vue下拉樹只能選擇第三級(jí)選項(xiàng)，為了解決這個(gè)問題，查閱了官方文檔
https://vue-treeselect.js.org/#disable-item-selection
然后看到isDisabled屬性可以禁止選擇，具體實(shí)現(xiàn)代碼如下：
<treeselect
:disable-branch-nodes="true"
:normalizer="normalizer"
v-model="formData.goodsTypeId"
:multiple="false"
:options="goodsType"
placeholder='請(qǐng)選擇'>
<label slot="option-label" slot-scope="{ node, shouldShowCount, count, labelClassName,
countClassName }">
{{ node.label }}
</label>
</treeselect>
如何給數(shù)據(jù)添加isDisabled屬性呢？
自己嘗試著在下拉樹配置中添加了一下，竟然成功了
【提示】node這個(gè)對(duì)象包含的字段打印了一下，(這些數(shù)據(jù)是后臺(tái)接口提供的)如下圖展示：
【isLeaf】Y是葉子節(jié)點(diǎn)，N是分支節(jié)點(diǎn)【typeLevel】第？級(jí)
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,
}
},
補(bǔ)充知識(shí)：Vue ElementUI使用el-tree，只容許葉子結(jié)點(diǎn)有多選框
在使用el-tree時(shí)，我們需要多選功能會(huì)在el-tree標(biāo)簽添加show-checkbox屬性：
那么，有時(shí)會(huì)遇到這樣的需求，父節(jié)點(diǎn)不讓多選，只容許多選葉子結(jié)點(diǎn)。那么，這時(shí)我們改怎么做呢？
通過調(diào)試工具：
多選框就是.el-checkbox這個(gè)樣式，那么我們只需把這個(gè)樣式覆蓋一下，把它隱藏掉：
/deep/ .el-tree-node{
.is-leaf + .el-checkbox .el-checkbox__inner{
display: inline-block;
}
.el-checkbox .el-checkbox__inner{
display: none;
}
}
注意：/deep/ 是強(qiáng)穿透，也可以寫成<<< ，只在當(dāng)前組件文件起作用，不改變整個(gè)頁面樣式。
最后別忘了在el-tree組件加上 :check-strictly="true" 是否嚴(yán)格的遵循父子不互相關(guān)聯(lián)的做法
以上這篇vue Treeselect下拉樹只能選擇第N級(jí)元素實(shí)現(xiàn)代碼就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue el-date-picker動(dòng)態(tài)限制時(shí)間范圍案例詳解
這篇文章主要介紹了vue el-date-picker動(dòng)態(tài)限制時(shí)間范圍案例詳解,本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
這篇文章主要為大家詳細(xì)介紹了一些vue使用axios的小技巧,文中的示例代碼講解詳細(xì),對(duì)我們深入掌握vue有一定的幫助,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
vue實(shí)現(xiàn)數(shù)字動(dòng)態(tài)翻牌的效果（開箱即用）
這篇文章主要介紹了vue實(shí)現(xiàn)數(shù)字動(dòng)態(tài)翻牌的效果（開箱即用）,實(shí)現(xiàn)原理是激將1到9的數(shù)字豎直排版，通過translate移動(dòng)位置顯示不同數(shù)字，本文通過實(shí)例代碼講解，需要的朋友可以參考下2019-12-12
這篇文章主要給大家介紹了關(guān)于vue子組件獲取到它父組件數(shù)據(jù)的4種方法,對(duì)于vue來說組件之間的消息傳遞是非常重要的,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
vue項(xiàng)目本地開發(fā)完成后部署到服務(wù)器后報(bào)404錯(cuò)誤解決方案
很多時(shí)候我們發(fā)現(xiàn)辛辛苦苦寫的VueJs應(yīng)用經(jīng)過打包后在自己本地搭建的服務(wù)器上測(cè)試沒有什么問題,但真正放在服務(wù)器上后會(huì)發(fā)現(xiàn)或多或少的問題,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目本地開發(fā)完成后部署到服務(wù)器后報(bào)404錯(cuò)誤的解決方案,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了Element Card 卡片的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
用 Vue.js 遞歸組件實(shí)現(xiàn)可折疊的樹形菜單(demo)
通過本文給您演示一下如何有效地使用遞歸組件，我將通過建立一個(gè)可擴(kuò)展/收縮的樹形菜單的來一步步進(jìn)行。下面通過本文給大家分享用 Vue.js 遞歸組件實(shí)現(xiàn)可折疊的樹形菜單，需要的朋友參考下吧2017-12-12
Vue中對(duì)watch的理解(關(guān)鍵是immediate和deep屬性)
watch偵聽器，是Vue實(shí)例的一個(gè)屬性，是用來響應(yīng)數(shù)據(jù)的變化，需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí)，這個(gè)方式是最有用的，這篇文章主要介紹了Vue中對(duì)watch的理解,需要的朋友可以參考下2022-11-11
如何在Vue3中使用視頻庫Video.js實(shí)現(xiàn)視頻播放功能
在Vue3項(xiàng)目中集成Video.js庫,可以創(chuàng)建強(qiáng)大的視頻播放功能,這篇文章主要介紹了如何在Vue3中使用視頻庫Video.js實(shí)現(xiàn)視頻播放功能,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
vue3+element-plus動(dòng)態(tài)路由菜單示例代碼
這篇文章主要介紹了vue3+element-plus動(dòng)態(tài)路由菜單示例代碼,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-11-11