el-tree限制選中個數(shù)的實例
更新時間:2024年08月13日 12:10:38 作者:花歸去
這篇文章主要介紹了el-tree限制選中個數(shù),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
el-tree限制選中個數(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é)點
ElMessage.warning(`您最多只能選擇 ${3} 個節(jié)點!`);
}
};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} 個節(jié)點!`);
}
Object.keys(treeNodesMap).forEach((key) => {
let item = treeNodesMap[key] || {};
if (!checkedKeys.includes(key)) {
let data = item.data || {};
data.disabled = status;
treeRef.value.setCurrentNode(data);
}
});
};到此這篇關于el-tree限制選中個數(shù)的文章就介紹到這了,更多相關el-tree限制選中個數(shù)內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
您可能感興趣的文章:
- ElementUI中el-tree如何獲取每個節(jié)點點擊的選中狀態(tài)
- el-tree使用獲取當前選中節(jié)點的父節(jié)點數(shù)據(jù)
- vue中el-tree動態(tài)初始默認選中和全選實現(xiàn)方法
- Element樹形控件el-tree懶加載并設置默認展開和選中的效果
- 餓了么UI中el-tree樹節(jié)點選中高亮的兩種常用方式(highlight-current屬性)
- el-tree設置選中高亮/焦點高亮、選中節(jié)點加深背景及更改字體顏色等的方法
- vue2+elementUI的el-tree的選中、高亮、定位功能的實現(xiàn)
- 解決el-tree數(shù)據(jù)回顯時子節(jié)點部分選中父節(jié)點都全選中的坑
相關文章
javascript用函數(shù)實現(xiàn)對象的方法
這篇文章主要介紹了javascript用函數(shù)實現(xiàn)對象的方法,涉及javascript函數(shù)使用技巧,需要的朋友可以參考下2015-05-05

