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 }) };

上边的代码有一个问题 ,就是不能 跨级 收起。改后的代码如下

  1. onExpand = (a,b) => {
  2. if(b.expanded){
  3. if(a.length>0){
  4. a.splice(0,a.length-1)
  5. }
  6. this.setState({
  7. expandedKeys:a
  8. })
  9. }else{
  10. const key = b.node.props.children.map((obj,index)=>{
  11. if(a.indexOf(obj.key)>-1){
  12. return obj.key;
  13. }
  14. return ''
  15. }).filter((v,index)=> v!== '');
  16. //index 是点击收起节点的下级展开节点
  17. const index = a.indexOf(key[0]); //因为展开的时候会收起兄弟节点 所以这里应该只有一个
  18. if(index>0){
  19. a.splice(0,index + 1); //从0开始 删除到点击的下一级已展开节点
  20. }
  21. this.setState({
  22. expandedKeys:a
  23. })
  24. }
  25. };

另一方面就是 展示部分 显示 查看更多... 这个我看看怎么弄。

antd tree组件文件名换行 + 点击展开时,自动收起同级其他展开目录的更多相关文章

  1. antd Tree组件中,自定义右键菜单

    最近项目中,有一个需求是自定义antd的Tree组件的右键菜单功能. 直接上代码 class Demo extends Component { state = { rightClickNodeTree ...

  2. 关于 antd tree 组件的推拽操作

    最近项目中使用到 tree 组件的推拽操作, 按常理来说应该主要用到其中的 onDrop 事件,但其中的参数又没有详细的说明,只是在官网给了个例子,网上搜索后又没有发现到位的总结. 因此经过N次的测试 ...

  3. Js制作点击输入框时默认文字消失的效果

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-02-17) 为了提高用户体验和易用度,一些设计师会对网页中用户经常用的东西进行优化,比如输入框.一般的输入框是怎样优化的呢 ...

  4. antd的Tree控件实现点击展开功能

    antd 的 Tree 控件没有提供点击展开的功能,只能通过左边的三角形实现展开和收起,没办法只好自己实现这个功能. 先看效果 如图实现的是类似 Mac 文件目录形式的结构,有箭头代表是个文件夹,点击 ...

  5. Antd组件库,利用Menu组件模拟一个简单Tree组件

    当前工作中,前端的主要技术栈用是vue. 那React怎么办呢?总不至于把他扔在墙角吧! 只能在一些很小的项目上,也只有自己一个前端的时候,悄悄的上React. 当然,React项目UI组件还是最喜欢 ...

  6. element中的tree组件实现菜单分配

    返回的菜单数据 tree组件的使用 <el-tree ref="menuList" // :data="menuList" // 展示数据 :props= ...

  7. 【技术博客】使用iview的Tree组件写一棵文件树

    本次项目的前端部分使用vue框架+iview组件构建,其中IDE的文件树部分使用了iview的Tree组件,但是Tree组件本身的接口功能极其有限,网上的相关资料也不多,在使用时费了一番功夫才摸索清楚 ...

  8. dwz tree组件 取得所选择的值

    DWZ的树结构是按<ul>,<li>的嵌套格式构成,最顶级的<ul>以class=”tree”标识. treeFolder, treeCheck, expand|c ...

  9. JQuery EasyUI Tree组件的Bug记录

    记录一下使用项目中使用EasyUI遇到的bug,废话少说直接上菜  - _-(bug)..... bug ::   .netcore创建一个web应用时候,会自动引入jQuery库以及一些插件,但是在 ...

随机推荐

  1. thinkphp用ajax遇到的坑——ajax请求没有反应

    view视图的 html 的 js 代码如下, $.ajax({             url:"test",//这里指向的就不再是页面了,而是一个方法.             ...

  2. class空格多类名

    1.class属性唯一但是有空格,选择空格两边唯一的哪一个 <div id="tempConfigTable" class="dtb-style-1 table-d ...

  3. 17. pt-online-schema-change

    在平时MySQL的运维过程中,经常会遇到表结构的变更.在表比较小的时候,直接进行变更,时间较短,但是当表非常大的时候,这么做会导致应用卡死,服务不可用.目前InnoDB引擎是通过以下步骤来进行DDL的 ...

  4. TerraGate SFS Manager配置时权限设置问题

    配置SFS Manager时出现以下错误:      "windows account(*\ASPNET) that does not have sufficient permissions ...

  5. SpringBoot小新手。

    2018-09-27 最近在学习SpringBoot:教材 先是在https://start.spring.io/下载了工程.demo.zip 下载之后,导入Eclipse工程,pom.xml里面的& ...

  6. js判断手机系统(Android或IOS),跳转相应下载地址

    <script type="text/javascript"> $(document).ready(function(e) { var u = navigator.us ...

  7. wince 6.0 汉字乱码

    CStdioFile file; file.Open(…); file.WriteString(_T("abc你好"));//只能写入abc 解决办法: 使用setlocale语句 ...

  8. http协议基本原理

    HTTP(HyperText Transport Protocol)是超文本传输协议的缩写,它用于传送WWW方式的数据,关于HTTP协议的详细内容请参考RFC2616.HTTP协议采用了请求/响应模型 ...

  9. Crontab定时执行Oracle存储过程

    Crontab定时执行Oracle存储过程 需求描述 我们有一个Oracle的存储过程,里面是每个月需要执行一下,生成报表,然后发送给业务部门,这一个功能我们有实现在系统的前台界面(如图1-1),但是 ...

  10. Scala数组小结

    1.定长数组 定长数组:指长度不可变的数组Array. 第一种方式: 先声明一个数组,后初始化该数组: scala> val array = new Array[Double](5) array ...