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库以及一些插件,但是在 ...
随机推荐
- thinkphp用ajax遇到的坑——ajax请求没有反应
view视图的 html 的 js 代码如下, $.ajax({ url:"test",//这里指向的就不再是页面了,而是一个方法. ...
- class空格多类名
1.class属性唯一但是有空格,选择空格两边唯一的哪一个 <div id="tempConfigTable" class="dtb-style-1 table-d ...
- 17. pt-online-schema-change
在平时MySQL的运维过程中,经常会遇到表结构的变更.在表比较小的时候,直接进行变更,时间较短,但是当表非常大的时候,这么做会导致应用卡死,服务不可用.目前InnoDB引擎是通过以下步骤来进行DDL的 ...
- TerraGate SFS Manager配置时权限设置问题
配置SFS Manager时出现以下错误: "windows account(*\ASPNET) that does not have sufficient permissions ...
- SpringBoot小新手。
2018-09-27 最近在学习SpringBoot:教材 先是在https://start.spring.io/下载了工程.demo.zip 下载之后,导入Eclipse工程,pom.xml里面的& ...
- js判断手机系统(Android或IOS),跳转相应下载地址
<script type="text/javascript"> $(document).ready(function(e) { var u = navigator.us ...
- wince 6.0 汉字乱码
CStdioFile file; file.Open(…); file.WriteString(_T("abc你好"));//只能写入abc 解决办法: 使用setlocale语句 ...
- http协议基本原理
HTTP(HyperText Transport Protocol)是超文本传输协议的缩写,它用于传送WWW方式的数据,关于HTTP协议的详细内容请参考RFC2616.HTTP协议采用了请求/响应模型 ...
- Crontab定时执行Oracle存储过程
Crontab定时执行Oracle存储过程 需求描述 我们有一个Oracle的存储过程,里面是每个月需要执行一下,生成报表,然后发送给业务部门,这一个功能我们有实现在系统的前台界面(如图1-1),但是 ...
- Scala数组小结
1.定长数组 定长数组:指长度不可变的数组Array. 第一种方式: 先声明一个数组,后初始化该数组: scala> val array = new Array[Double](5) array ...