当前位置:网站首页>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]);
}
}
},
边栏推荐
- Getting started with microservices (resttemplate, Eureka, Nacos, feign, gateway)
- The new content of the text component can be added through the tag_ Config set foreground and background colors
- Daily question brushing record (XIV)
- How to add new fields to mongodb with code (all)
- ESP32 hosted
- 119. Pascal‘s Triangle II. Sol
- 点到直线的距离直线的交点及夹角
- opencv 判断点在多边形内外
- 700. Search in a Binary Search Tree. Sol
- Golang writes the opening chapter of selenium framework
猜你喜欢
Oracle triggers
Oracle hint understanding
Talking about MySQL index
Nacos 的安装与服务的注册
The difference between MVVM and MVC
Getting started with microservices (resttemplate, Eureka, Nacos, feign, gateway)
笔记本电脑蓝牙怎么用来连接耳机
Official clarification statement of Jihu company
航海日答题小程序之航海知识竞赛初赛
数博会精彩回顾 | 彰显科研实力,中创算力荣获数字化影响力企业奖
随机推荐
FBO and RBO disappeared in webgpu
Draw a red lantern with MATLAB
如何开发引入小程序插件
实战:fabric 用户证书吊销操作流程
Type of fault
Basic grammar of interview (Part 1)
Oracle hint understanding
数据泄露怎么办?'华生·K'7招消灭安全威胁
Official clarification statement of Jihu company
thinkphp5.1跨域问题解决
2022-07-05:给定一个数组,想随时查询任何范围上的最大值。 如果只是根据初始数组建立、并且以后没有修改, 那么RMQ方法比线段树方法好实现,时间复杂度O(N*logN),额外空间复杂度O(N*
database mirroring
Interview questions for famous enterprises: Coins represent a given value
A substring with a length of three and different characters in the leetcode simple question
元宇宙中的三大“派系”
Daily question brushing record (XIV)
[groovy] groovy dynamic language features (automatic type inference of function arguments in groovy | precautions for function dynamic parameters)
极狐公司官方澄清声明
Analyse des risques liés aux liaisons de microservices
Alternating merging strings of leetcode simple questions