Skip to content

Tree组件

tree组件无法点击三角形展开收缩

原因:没有给数组设置key字段

也可以fieldNames 自定义节点 title、key、children 的字段

jsx
const treeFieldNames = {
	title: "title",
	key: "id",
	children: "children",
};

使用expandedKeys属性和onExpand事件进行数据的可控操作

Tree中的api属性有一个defaultExpandAll

这个属性只在第一次渲染的时候有效,也就是说用户刷新页面后或者在这个页面操作完这个组件后重新渲染的时候,这个值将不会有效。

解决办法:

text
expandedKeys={help.treeIdData}

onExpand={this.onExpand}

使用expandedKeys属性和onExpand事件进行数据的可控操作

初始化的时候获取所有的TreeKeysr然后将它设置到expandedKeys属性上,当用户操作Tree节点的时候再触发onExpand更新expandedKeys数据

具体思路参考 https://reactjs.org/docs/forms.html 或者 https://github.com/ant-design/ant-design/issues/4145#issuecomment-27058096

一般不会使用defaultCheckedKeys和defaultExpandedKeys,要实现业务要求,需要expandedKeys和onExpand、checkedKeys和onCheck结合使用。

需要注意: expandedKeys 的类型也很重要,比如下面key是number类型, expandedKeys也必须是数字expandedKeys=[1,2],如果是这样expandedKeys=["1","2"]也不会生效

设置了treeData为什么无法渲染?

原因:异步原因。 需要给tree组件添加如下逻辑:

text
 {
  treeData.length > 0 ? (
    <Tree
        blockNode
        treeData={treeData}
    >
    </Tree>
   ) : null
}

antd v4 Tree组件展开TreeNode出现内容溢出部分变化闪烁

https://www.lanwuyaojiu.cn/blogm/blogart-85.html 解决方法,给中间内容加上一个固定的宽度,然后设置文本隐藏属性,且不能使用 百分比单位 和 calc(100% - 20px)等响应单位。修改JS和CSS。

checkable勾选 selectable点击选中

同时设置 checkable=true和 selectable=true时

只能点击复选框切换勾选,不可点击label切换勾选

仅设置chectable=true,selectable=false时, 既可点击复选框切换勾选,又可点击label切换勾选

设置disabled=true时,无论checkable=true和 selectable=true,均无法勾选

Contributors

作者:Long Mo
字数统计:509 字
阅读时长:1 分钟
Long Mo
文章作者:Long Mo
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Longmo Docs