当前位置:网站首页>a-tree 树的全部展开和收起
a-tree 树的全部展开和收起
2022-07-05 22:20:00 【短暂又灿烂的】
ant-design-vue树a-tree需要实现全部展开和全部收起功能实现
this.$refs.tree.store 打印出来的是这样的数据,里面的expanded就是控制展开收起的功能
\
代码实现:
<div class="expand">
<a-button size="small" @click="expandHandle">{
{
expandAll ? "全部收起" : "全部展开"
}}</a-button>
</div>
<div class="func">
<span>name</span>
<span>value</span>
</div>
<a-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>
</a-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]);
}
}
},
边栏推荐
- Kubernetes Administrator certification (CKA) exam notes (IV)
- Blocking of concurrency control
- What changes has Web3 brought to the Internet?
- Golang writes the opening chapter of selenium framework
- Metaverse Ape获Negentropy Capital种子轮融资350万美元
- The statistics of leetcode simple question is the public string that has appeared once
- Analyse des risques liés aux liaisons de microservices
- Common interview questions of JVM manufacturers
- 50. Pow(x, n). O(logN) Sol
- Metaverse Ape上线倒计时,推荐活动火爆进行
猜你喜欢
Create a virtual machine on VMware (system not installed)
700. Search in a Binary Search Tree. Sol
Oracle hint understanding
Leetcode simple question: check whether each row and column contain all integers
Recovery technology with checkpoints
Installation of VMware Workstation
Daily question brushing record (XIV)
Metaverse Ape获Negentropy Capital种子轮融资350万美元
Business learning of mall order module
Database tuning solution
随机推荐
Platform bus
How to add new fields to mongodb with code (all)
Leetcode simple question: the minimum cost of buying candy at a discount
Pl/sql basic case
Sentinel production environment practice (I)
Database recovery strategy
AD637 usage notes
Pinctrl subsystem and GPIO subsystem
The new content of the text component can be added through the tag_ Config set foreground and background colors
Qtquick3d real time reflection
Leetcode simple question check whether all characters appear the same number of times
Hcip day 16
Calculation method of boundary IOU
U盘的文件无法删除文件怎么办?Win11无法删除U盘文件解决教程
How to develop and introduce applet plug-ins
Meituan dynamic thread pool practice ideas, open source
Server optimization of performance tuning methodology
如何向mongoDB中添加新的字段附代码(全)
The difference between MVVM and MVC
FBO and RBO disappeared in webgpu