当前位置:网站首页>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]);
}
}
},
边栏推荐
- 数博会精彩回顾 | 彰显科研实力,中创算力荣获数字化影响力企业奖
- The statistics of leetcode simple question is the public string that has appeared once
- Win11缺少dll文件怎么办?Win11系统找不到dll文件修复方法
- Performance testing of software testing
- Common interview questions of redis factory
- Metaverse Ape猿界应邀出席2022·粤港澳大湾区元宇宙和web3.0主题峰会,分享猿界在Web3时代从技术到应用的文明进化历程
- 如何开发引入小程序插件
- 等到产业互联网时代真正发展成熟,我们将会看待一系列的新产业巨头的出现
- Postman核心功能解析-参数化和测试报告
- Official clarification statement of Jihu company
猜你喜欢
Overview of concurrency control
IIC bus realizes client device
Granularity of blocking of concurrency control
Concurrency control of performance tuning methodology
opencv 判断点在多边形内外
Countdown to 92 days, the strategy for the provincial preparation of the Blue Bridge Cup is coming~
[Yugong series] go teaching course 003-ide installation and basic use in July 2022
Meituan dynamic thread pool practice ideas, open source
Learning of mall permission module
Win11 runs CMD to prompt the solution of "the requested operation needs to be promoted"
随机推荐
Serializability of concurrent scheduling
Create a virtual machine on VMware (system not installed)
What about data leakage? " Watson k'7 moves to eliminate security threats
[agc009e] eternal average - conclusion, DP
Promql demo service
[groovy] mop meta object protocol and meta programming (execute groovy methods through metamethod invoke)
A trip to Suzhou during the Dragon Boat Festival holiday
When the industrial Internet era is truly mature, we will look at the emergence of a series of new industrial giants
Summary of concurrency control
如何開發引入小程序插件
2022-07-05: given an array, you want to query the maximum value in any range at any time. If it is only established according to the initial array and has not been modified in the future, the RMQ meth
数据泄露怎么办?'华生·K'7招消灭安全威胁
Sentinel production environment practice (I)
Damn, window in ie open()
Leetcode simple question: the minimum cost of buying candy at a discount
Text组件新增内容通过tag_config设置前景色、背景色
如何快速体验OneOS
Storage optimization of performance tuning methodology
70. Climbing Stairs. Sol
Search: Future Vision (moving sword)