antd tree组件文件名换行 + 点击展开时,自动收起同级其他展开目录
1.在项目中用 antd的tree组件的时候,遇到两个问题
1.文件名太长的话 会超出容器 很难看,解决方法如下
` 引入css在global下设置
:global {
.ant-tree li .ant-tree-node-content-wrapper{
height:auto;
}
.ant-tree-node-content-wrapper{
white-space: normal;
max-width: 100%;
}
}
`
2.节点都展开的话 会太高了。也会撑开盒子,影响美观。
解决方法: 一方面 展开一个的时候 ,可以收起同级别其他已经展开的。代码如下,在tree的api里 展开回调设置,同时 要tree组件绑定 state的展开节点数组。
onExpand = (a,b) => { if(b.expanded){ if(a.length>0){ a.splice(0,a.length-1) } } this.setState({ expandedKeys:a }) };
上边的代码有一个问题 ,就是不能 跨级 收起。改后的代码如下
onExpand = (a,b) => {
if(b.expanded){
if(a.length>0){
a.splice(0,a.length-1)
}
this.setState({
expandedKeys:a
})
}else{
const key = b.node.props.children.map((obj,index)=>{
if(a.indexOf(obj.key)>-1){
return obj.key;
}
return ''
}).filter((v,index)=> v!== '');
//index 是点击收起节点的下级展开节点
const index = a.indexOf(key[0]); //因为展开的时候会收起兄弟节点 所以这里应该只有一个
if(index>0){
a.splice(0,index + 1); //从0开始 删除到点击的下一级已展开节点
}
this.setState({
expandedKeys:a
})
}
};
另一方面就是 展示部分 显示 查看更多... 这个我看看怎么弄。
antd tree组件文件名换行 + 点击展开时,自动收起同级其他展开目录的更多相关文章
- antd Tree组件中,自定义右键菜单
最近项目中,有一个需求是自定义antd的Tree组件的右键菜单功能. 直接上代码 class Demo extends Component { state = { rightClickNodeTree ...
- 关于 antd tree 组件的推拽操作
最近项目中使用到 tree 组件的推拽操作, 按常理来说应该主要用到其中的 onDrop 事件,但其中的参数又没有详细的说明,只是在官网给了个例子,网上搜索后又没有发现到位的总结. 因此经过N次的测试 ...
- Js制作点击输入框时默认文字消失的效果
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-02-17) 为了提高用户体验和易用度,一些设计师会对网页中用户经常用的东西进行优化,比如输入框.一般的输入框是怎样优化的呢 ...
- antd的Tree控件实现点击展开功能
antd 的 Tree 控件没有提供点击展开的功能,只能通过左边的三角形实现展开和收起,没办法只好自己实现这个功能. 先看效果 如图实现的是类似 Mac 文件目录形式的结构,有箭头代表是个文件夹,点击 ...
- Antd组件库,利用Menu组件模拟一个简单Tree组件
当前工作中,前端的主要技术栈用是vue. 那React怎么办呢?总不至于把他扔在墙角吧! 只能在一些很小的项目上,也只有自己一个前端的时候,悄悄的上React. 当然,React项目UI组件还是最喜欢 ...
- element中的tree组件实现菜单分配
返回的菜单数据 tree组件的使用 <el-tree ref="menuList" // :data="menuList" // 展示数据 :props= ...
- 【技术博客】使用iview的Tree组件写一棵文件树
本次项目的前端部分使用vue框架+iview组件构建,其中IDE的文件树部分使用了iview的Tree组件,但是Tree组件本身的接口功能极其有限,网上的相关资料也不多,在使用时费了一番功夫才摸索清楚 ...
- dwz tree组件 取得所选择的值
DWZ的树结构是按<ul>,<li>的嵌套格式构成,最顶级的<ul>以class=”tree”标识. treeFolder, treeCheck, expand|c ...
- JQuery EasyUI Tree组件的Bug记录
记录一下使用项目中使用EasyUI遇到的bug,废话少说直接上菜 - _-(bug)..... bug :: .netcore创建一个web应用时候,会自动引入jQuery库以及一些插件,但是在 ...
随机推荐
- 一个价格,两份大礼!Mockplus X MindManager限时联合大促
3月暖春,阳光明媚了,工作量也伴随气温回升了,面对那么多的tasks,效率提升已经迫在眉睫.为了更好的服务产品设计,为各位产品经理.UI设计师.UX设计师等带来更快更简单的设计解决方案,Mockplu ...
- UI与开发的必备神器!— iDoc一键适配不同平台尺寸(iDoc201902-2新功能)
一.自动换算不同平台尺寸在一个项目从设计到开发的过程中,为了适配不同设备,一份设计稿,UI需要花大量的时间去制作各种尺寸的切图,耗时耗力. 那有没有一种高效的办法,让UI只需要设计一份设计稿就可以了呢 ...
- Netsharp总体设计
阅读本文请先阅读如下两篇文章 什么是企业软件 Netsharp什么 Netsharp总体设计 1.1 Netsharp终端形式 Netsharp基于.NET平台,支持的产品形态有三种: 北极熊 ...
- centos中单进程监控
[root@k8s6 proc]# ps aux|grep -v PID|sort -rn -k +|head - root ? Ssl : : /usr/bin/dockerd root ? Ssl ...
- 1018 Public Bike Management (30) Dijkstra算法 + DFS
题目及题解 https://blog.csdn.net/CV_Jason/article/details/81385228 迪杰斯特拉重新认识 两个核心的存储结构: int dis[n]: //记录每 ...
- python闭包的详细解析
一.什么是闭包? 如果一个内嵌函数访问外部嵌套函数作用域的变量,并返回这个函数,则这个函数就是闭包 闭包必须满足三个条件: 1. 必须有一个内嵌函数 2. 内嵌函数必须引用外部嵌套函数中的变量 ...
- select和其元素options
普通的select形式为: <select> <option>选中元素1</option> <option>选中元素2</option> & ...
- android-基础编程-ScrollView
滚动视图(ScrollView)是指当拥有很多内容,屏幕显示不完时,需要通过滚动来显示完整的视图.包括水平滚动视图(HorizontalScrollView)和垂直滚动视图(ScrollView) 基 ...
- PHP字符串函数之 strcmp strncmp strcasecmp strncasecmp strnatcmp strnatcasecmp
strcmp – 二进制安全字符串比较 strncmp – 二进制安全比较字符串开头的若干个字符 strcasecmp – 二进制安全比较字符串(不区分大小写) strncasecmp – 二进制安全 ...
- 9.3AspectJ
1.1 介绍 AspectJ是一个基于Java语言的AOP框架 Spring2.0以后新增了对AspectJ切点表达式支持 @AspectJ 是AspectJ1.5新增功能,通过JDK5注解技术,允许 ...