Tree组件
tree组件无法点击三角形展开收缩
原因:没有给数组设置key字段
也可以fieldNames 自定义节点 title、key、children 的字段
const treeFieldNames = {
title: "title",
key: "id",
children: "children",
};
使用expandedKeys属性和onExpand事件进行数据的可控操作
Tree中的api属性有一个defaultExpandAll
这个属性只在第一次渲染的时候有效,也就是说用户刷新页面后或者在这个页面操作完这个组件后重新渲染的时候,这个值将不会有效。
解决办法:
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组件添加如下逻辑:
{
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,均无法勾选