el-tree限制選中個(gè)數(shù)的實(shí)例
el-tree限制選中個(gè)數(shù)
<el-tree style="max-width: 600px" :data="Treedata" :check-strictly="true" show-checkbox node-key="id" :props="defaultProps" :default-expanded-keys="['1', '2']" ref="treeRef" @check="handleCheckChange" />
const handleCheckChange = (data: any, checked: any) => { const selectedNodes = treeRef.value.getCheckedNodes(); if (selectedNodes.length > 3 && checked) { treeRef.value.setChecked(data, false); // 取消選中超出限制的節(jié)點(diǎn) ElMessage.warning(`您最多只能選擇 ${3} 個(gè)節(jié)點(diǎn)!`); } };
const handleCheckChange= (currNode: any, checkedInfo: any) => { let checkedKeys = checkedInfo.checkedKeys || []; let treeNodesMap = treeRef.value.store?.nodesMap || {}; let status = checkedKeys.length >= 3; if (status) { ElMessage.warning(`您最多只能選擇 ${3} 個(gè)節(jié)點(diǎn)!`); } Object.keys(treeNodesMap).forEach((key) => { let item = treeNodesMap[key] || {}; if (!checkedKeys.includes(key)) { let data = item.data || {}; data.disabled = status; treeRef.value.setCurrentNode(data); } }); };
到此這篇關(guān)于el-tree限制選中個(gè)數(shù)的文章就介紹到這了,更多相關(guān)el-tree限制選中個(gè)數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- ElementUI中el-tree如何獲取每個(gè)節(jié)點(diǎn)點(diǎn)擊的選中狀態(tài)
- el-tree使用獲取當(dāng)前選中節(jié)點(diǎn)的父節(jié)點(diǎn)數(shù)據(jù)
- vue中el-tree動(dòng)態(tài)初始默認(rèn)選中和全選實(shí)現(xiàn)方法
- Element樹(shù)形控件el-tree懶加載并設(shè)置默認(rèn)展開(kāi)和選中的效果
- 餓了么UI中el-tree樹(shù)節(jié)點(diǎn)選中高亮的兩種常用方式(highlight-current屬性)
- el-tree設(shè)置選中高亮/焦點(diǎn)高亮、選中節(jié)點(diǎn)加深背景及更改字體顏色等的方法
- vue2+elementUI的el-tree的選中、高亮、定位功能的實(shí)現(xiàn)
- 解決el-tree數(shù)據(jù)回顯時(shí)子節(jié)點(diǎn)部分選中父節(jié)點(diǎn)都全選中的坑
相關(guān)文章
javascript tips提示框組件實(shí)現(xiàn)代碼
一個(gè)簡(jiǎn)單的類(lèi)似title的提示效果,但現(xiàn)實(shí)內(nèi)容可以很豐富,以上js另存為tip.js,下面是使用的demo。2010-11-11一個(gè)JavaScript繼承的實(shí)現(xiàn)
一個(gè)JavaScript繼承的實(shí)現(xiàn)...2006-10-10簡(jiǎn)單實(shí)現(xiàn)jquery焦點(diǎn)圖
這篇文章主要為大家詳細(xì)介紹了如何簡(jiǎn)單實(shí)現(xiàn)jquery焦點(diǎn)圖效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12JS 實(shí)現(xiàn)請(qǐng)求調(diào)度器
這篇文章主要介紹了JS 實(shí)現(xiàn)請(qǐng)求調(diào)度器的方法,幫助大家更好的理解和學(xué)習(xí)使用js,感興趣的朋友可以了解下2021-03-03JS組件Bootstrap實(shí)現(xiàn)彈出框效果代碼
這篇文章主要介紹了JS組件Bootstrap實(shí)現(xiàn)彈出框效果代碼的相關(guān)資料,對(duì)彈出框感興趣的小伙伴們可以參考一下2016-04-04js實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的五種方法推薦
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的五種方法推薦。小編覺(jué)得挺不錯(cuò)的?,F(xiàn)在分享給大家,讓大家參考一下2016-03-03JavaScript如何實(shí)現(xiàn)LRU緩存淘汰算法
LRU(Least Recently Used)緩存淘汰算法是一種常見(jiàn)的緩存淘汰策略,它的核心思想是優(yōu)先淘汰最近最少使用的緩存數(shù)據(jù),以保證緩存中的數(shù)據(jù)始終是最熱門(mén)的。本文主要介紹了一些關(guān)于如何實(shí)現(xiàn)LRU緩存淘汰算法的方法,感興趣的小伙伴可以參考一下2023-04-04微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_
這篇文章主要介紹了微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"},非常具有實(shí)用價(jià)值,需要的朋友可以參考下2018-10-10