博客
关于我
ant design vue中Tree树形控件defaultExpandAll设置无效
阅读量:391 次
发布时间:2019-03-05

本文共 3171 字,大约阅读时间需要 10 分钟。

Tree树形控件 ,defaultExpandAll 仅在组件第一次渲染时有效,tree组件、其它组件的defaultXXX值都是这个行为。

解决:

treeData数据:

treeData = [{           title: '权限管理',        key: '0-0',        children: [{                   title: '用户管理',                key: '0-0-0',                children: [{                           title: '全选',                        key: '0-0-0-0'                    },                    {                           title: '新增',                        key: '0-0-0-1'                    },                    {                           title: '查询',                        key: '0-0-0-2'                    },                    {                           title: '详情',                        key: '0-0-0-3'                    },                    {                           title: '修改',                        key: '0-0-0-4'                    },                    {                           title: '删除',                        key: '0-0-0-5'                    },                    {                           title: '导入',                        key: '0-0-0-6'                    },                    {                           title: '导出',                        key: '0-0-0-7'                    }                ]            },            {                   title: '0-0-1',                key: '0-0-1',                children: [{                           title: '0-0-1-0',                        key: '0-0-1-0',                        class: 'last',                        children: [{                                   title: '新增',                                key: '0-0-1-0-2'                            },                            {                                   title: '删除',                                key: '0-0-1-1-2'                            },                            {                                   title: '修改',                                key: '0-0-1-2-2'                            }                        ]                    },                    {                           title: '0-0-1-1',                        key: '0-0-1-1'                    },                    {                           title: '0-0-1-2',                        key: '0-0-1-2'                    }                ]            },            {                   title: '0-0-2',                key: '0-0-2'            }        ]    },    {           title: '0-1',        key: '0-1',        children: [{                   title: '0-1-0-0',                key: '0-1-0-0'            },            {                   title: '0-1-0-1',                key: '0-1-0-1'            },            {                   title: '0-1-0-2',                key: '0-1-0-2'            }        ]    },    {           title: '0-2',        key: '0-2'    }]

第一步:v-if="treeData && treeData.length > 0"

第二步:

// @change="switchMenu"        switchMenu(value, option){             console.log(value)          //defaultExpandAll 仅在组件第一次渲染时有效,实现展开收起的效果,做点手脚          let treeData_ = this.treeData          this.treeData = []          setTimeout(()=>{               this.defaultExpandAllMenu = value            this.treeData = treeData_          },500)        },

转载地址:http://qjxg.baihongyu.com/

你可能感兴趣的文章
Nginx 结合 consul 实现动态负载均衡
查看>>
Nginx 负载均衡与权重配置解析
查看>>
Nginx 负载均衡详解
查看>>
Nginx 负载均衡配置详解
查看>>
nginx 配置 单页面应用的解决方案
查看>>
nginx 配置dist 加上跨域配置
查看>>
nginx 配置https(一)—— 自签名证书
查看>>
nginx 配置~~~本身就是一个静态资源的服务器
查看>>
Nginx 配置服务器文件上传与下载
查看>>
Nginx 配置清单(一篇够用)
查看>>
Nginx 配置解析:从基础到高级应用指南
查看>>
Nginx 集成Zipkin服务链路追踪
查看>>
nginx 集群配置方式 静态文件处理
查看>>
Nginx+Django-Python+BPMN-JS的整合工作流实战项目
查看>>
Nginx+Keepalived+LVS集群实战
查看>>
Nginx+Keepalived实现简单版高可用主备切换
查看>>
nginx+mysql+redis+mongdb+rabbitmq 自动化部署脚本
查看>>
nginx+php的搭建
查看>>
nginx+tomcat+memcached
查看>>
nginx+tomcat单个域名及多个域名配置
查看>>