實(shí)現(xiàn)代碼:
按鈕:
<el-button @click="takeall" style="height: 24px">
{{zhanstatus % 2 != 0 ? "收起所有" : "展開所有"}}
</el-button>
組件:
<el-form-item label="可選擇菜單" :label-width="formLabelWidth">
<el-tree
ref="folderTreeRef"
:data="mneudata"
show-checkbox
node-key="id"
highlight-current
:props="defaultProps"
/>
</el-form-item>
?在ref中綁定folderTreeRef?
展開&收起:
const folderTreeRef = ref(null);
const zhanstatus = ref(0);
let takeall = () => {
zhanstatus.value++;
if (zhanstatus.value % 2 == 0) {
const nodes = folderTreeRef.value.store._getAllNodes();
nodes.forEach(item => {
item.expanded = false;
});
} else {
const nodes = folderTreeRef.value.store._getAllNodes();
nodes.forEach(item => {
item.expanded = true;
});
}
};
效果:
實(shí)現(xiàn)原理:
打印上面的?folderTreeRef ,可以從原型鏈的store中找到 _getAllNodes 屬性
官方文檔好像沒(méi)有描述關(guān)于此屬性的內(nèi)容,查了好多資料,搜了多篇文章,可以發(fā)現(xiàn)store原型中有_getAllNodes 這個(gè)屬性文章來(lái)源:http://www.zghlxwxcb.cn/news/detail-806947.html
稍微試了一下居然成功了 (??????????????)文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-806947.html
到了這里,關(guān)于element plus 可選擇樹形組件(el-tree) 怎樣一鍵展開/收起?實(shí)現(xiàn)方法詳解的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!