el-tree限制選中個數(shù)的實例
更新時間:2024年08月13日 12:10:38 作者:花歸去
這篇文章主要介紹了el-tree限制選中個數(shù),本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
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); } }); };
到此這篇關(guān)于el-tree限制選中個數(shù)的文章就介紹到這了,更多相關(guān)el-tree限制選中個數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
您可能感興趣的文章:
- ElementUI中el-tree如何獲取每個節(jié)點點擊的選中狀態(tài)
- el-tree使用獲取當(dāng)前選中節(jié)點的父節(jié)點數(shù)據(jù)
- vue中el-tree動態(tài)初始默認選中和全選實現(xiàn)方法
- Element樹形控件el-tree懶加載并設(shè)置默認展開和選中的效果
- 餓了么UI中el-tree樹節(jié)點選中高亮的兩種常用方式(highlight-current屬性)
- el-tree設(shè)置選中高亮/焦點高亮、選中節(jié)點加深背景及更改字體顏色等的方法
- vue2+elementUI的el-tree的選中、高亮、定位功能的實現(xiàn)
- 解決el-tree數(shù)據(jù)回顯時子節(jié)點部分選中父節(jié)點都全選中的坑
相關(guān)文章
javascript tips提示框組件實現(xiàn)代碼
一個簡單的類似title的提示效果,但現(xiàn)實內(nèi)容可以很豐富,以上js另存為tip.js,下面是使用的demo。2010-11-11微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_
這篇文章主要介紹了微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"},非常具有實用價值,需要的朋友可以參考下2018-10-10