el-tree限制選中個(gè)數(shù)的實(shí)例
更新時(shí)間:2024年08月13日 12:10:38 作者:花歸去
這篇文章主要介紹了el-tree限制選中個(gè)數(shù),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
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)文章
webpack幾種手動(dòng)實(shí)現(xiàn)HMR的方式
眾所周知,在webpack中使用模塊熱替換(HMR),能夠使得應(yīng)用在運(yùn)行時(shí),本文就介紹一下如何實(shí)現(xiàn)HMR,感興趣的可以了解一下2021-07-07
javascript用函數(shù)實(shí)現(xiàn)對(duì)象的方法
這篇文章主要介紹了javascript用函數(shù)實(shí)現(xiàn)對(duì)象的方法,涉及javascript函數(shù)使用技巧,需要的朋友可以參考下2015-05-05
[JSF]使用DataModel處理表行事件的實(shí)例代碼
在使用JSF中,最常用的恐怕就要屬于表格的處理了。使用DataModel可以方便地進(jìn)行對(duì)表行的處理:2013-08-08

