需求： 產(chǎn)品要求權(quán)限樹形結(jié)構(gòu)添加外部復(fù)選框進(jìn)行全部展開或收起；全選或不全選。
實(shí)現(xiàn)步驟：
tree組件部分：
<div class="role-handle">
<div>權(quán)限選擇(可多選)</div>
<div>
<el-checkbox v-model="expandAll" @change="toggleExpandAll"> 展開/折疊 </el-checkbox>
<el-checkbox v-model="checkAll" @change="handleCheckAllChange"> 全選/全不選 </el-checkbox>
</div>
</div>
<el-tree
ref="treeRef"
node-key="code"
show-checkbox
v-loading="loading"
element-loading-text="權(quán)限資源加載中..."
class="el-tree"
:indent="12"
:data="treeData"
:props="defaultProps"
:highlight-current="true"
:default-expand-all="false"
:expand-on-click-node="false"
:default-checked-keys="menuIds"
:default-expanded-keys="expandedKeys"
@check="handleCheckChange"
/>
ts部分：
const checkAll: any = ref(false);
const expandAll: any = ref(false);
//略去其他變量；可查看文檔自行配置
// 展開
const toggleExpandAll = (type: any) => {
expandAll.value = type;
if (type) {
Object.values(treeRef.value.store.nodesMap).forEach((v: any) => v.expand());
return;
}
Object.values(treeRef.value.store.nodesMap).forEach((v: any) => v.collapse());
};
// 全選
const handleCheckAllChange = (val: any) => {
setCheckedRecursive(treeData.value, val);
};
const setCheckedRecursive = (nodes: any, checked: any) => {
for (const node of nodes) {
treeRef.value.setChecked(node.code, checked);
if (node.child && node.child.length > 0) {
setCheckedRecursive(node.child, checked);
}
}
};
頁面效果：
默認(rèn)狀態(tài)
展開狀態(tài)
折疊狀態(tài)
文章來源：http://www.zghlxwxcb.cn/news/detail-847661.html
全選狀態(tài)
全不選狀態(tài)
注意：以上方法會展開或折疊所有節(jié)點(diǎn)；全選或全不選節(jié)點(diǎn)。
問題：數(shù)據(jù)量過大以上操作會有明顯卡頓；有高效解決方法的朋友可以交流。文章來源地址http://www.zghlxwxcb.cn/news/detail-847661.html
到了這里，關(guān)于VUE3 + Elementui-Plus 之 樹形組件el-tree 一鍵展開（收起）；一鍵全選（不全選）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
