el-tree 树的全部展开和收起
架构树el-tree需要实现全部展开和全部收起功能,查阅资料借鉴别人的经验终于实现this.$refs.tree.store打印出来的是这样的数据,里面的expanded就是控制展开收起的功能<div class="expand"><el-button size="small" @click="expandHandle">{{expandAll ? "全部收起" : "全部
·
架构树el-tree需要实现全部展开和全部收起功能,查阅资料借鉴别人的经验终于实现
this.$refs.tree.store 打印出来的是这样的数据,里面的expanded就是控制展开收起的功能
<div class="expand">
<el-button size="small" @click="expandHandle">{{
expandAll ? "全部收起" : "全部展开"
}}</el-button>
</div>
<div class="func">
<span>资源名称</span>
<span>资源类型</span>
</div>
<el-tree
:data="treeData"
show-checkbox
node-key="id"
:default-expand-all="expandAll"
:default-expanded-keys="defaultExpandedKeys"
:expand-on-click-node="false"
ref="tree"
@check="handleCheck"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<span>{{ data.type }}</span>
</span>
</el-tree>
methods方法
expandHandle() {
console.log(this.$refs.tree.store);
this.expandAll = !this.expandAll;
this.expandNodes(this.$refs.tree.store.root);
},
// 遍历树形数据,设置每一项的expanded属性,实现展开收起
expandNodes(node) {
node.expanded = this.expandAll;
for (let i = 0; i < node.childNodes.length; i++) {
node.childNodes[i].expanded = this.expandAll;
if (node.childNodes[i].childNodes.length > 0) {
this.expandNodes(node.childNodes[i]);
}
}
},
更多推荐
已为社区贡献1条内容
所有评论(0)