vue Treeselect下拉樹(shù)只能選擇第N級(jí)元素實(shí)現(xiàn)代碼
今天在項(xiàng)目中遇到一個(gè)需求，就是vue下拉樹(shù)只能選擇第三級(jí)選項(xiàng)，為了解決這個(gè)問(wèn)題，查閱了官方文檔
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屬性呢？
自己嘗試著在下拉樹(shù)配置中添加了一下，竟然成功了
【提示】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í)我們改怎么做呢？
通過(guò)調(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)穿透，也可以寫(xiě)成<<< ，只在當(dāng)前組件文件起作用，不改變整個(gè)頁(yè)面樣式。
最后別忘了在el-tree組件加上 :check-strictly="true" 是否嚴(yán)格的遵循父子不互相關(guān)聯(lián)的做法
以上這篇vue Treeselect下拉樹(shù)只能選擇第N級(jí)元素實(shí)現(xiàn)代碼就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中項(xiàng)目如何提交form格式數(shù)據(jù)的表單
這篇文章主要介紹了vue中項(xiàng)目如何提交form格式數(shù)據(jù)的表單，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue?eslint報(bào)錯(cuò):Component?name?“xxxxx“?should?always?be?
新手在使用腳手架時(shí)總會(huì)報(bào)各種錯(cuò),下面這篇文章主要給大家介紹了關(guān)于vue?eslint報(bào)錯(cuò):Component?name?“xxxxx“?should?always?be?multi-word.eslintvue的4種解決方案,需要的朋友可以參考下2022-07-07
vue實(shí)現(xiàn)聯(lián)動(dòng)選擇
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)聯(lián)動(dòng)選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue實(shí)現(xiàn)不同用戶權(quán)限的方法詳解
在項(xiàng)目中,實(shí)現(xiàn)不同用戶的權(quán)限控制是常見(jiàn)的需求也是常見(jiàn)的功能模塊,本文將以 vue 為主要的代碼框架介紹幾種常見(jiàn)的權(quán)限控制方式,有需要的可以了解下2025-03-03
vue3原始值響應(yīng)方案及響應(yīng)丟失問(wèn)題解讀
這篇文章主要介紹了vue3原始值響應(yīng)方案及響應(yīng)丟失問(wèn)題解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue + Vue-router 同名路由切換數(shù)據(jù)不更新的方法
本篇文章主要介紹了Vue + Vue-router 同名路由切換數(shù)據(jù)不更新的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
基于Vue3實(shí)現(xiàn)列表虛擬滾動(dòng)效果
這篇文章主要為大家介紹了如何利用Vue3實(shí)現(xiàn)列表虛擬滾動(dòng)效果，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)或工作有一定價(jià)值，需要的可以參考一下2022-04-04
Vue圖片瀏覽組件v-viewer用法分析【支持旋轉(zhuǎn)、縮放、翻轉(zhuǎn)等操作】
這篇文章主要介紹了Vue圖片瀏覽組件v-viewer用法,結(jié)合實(shí)例形式分析了v-viewer的基本功能與使用方法,包括旋轉(zhuǎn)、縮放、翻轉(zhuǎn)等操作技巧,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了Vue3如何在setup中獲取元素引用(ref)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue3中SetUp函數(shù)的參數(shù)props、context詳解
我們知道setup函數(shù)是組合API的核心入口函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3中SetUp函數(shù)的參數(shù)props、context的相關(guān)資料,需要的朋友可以參考下2021-07-07