厦门市建设工程造价协会官方网站,做推送实用网站,怎么在家开网店挣钱呢,seo岗位有哪些1、先上效果
树型控件#xff0c;选中项形成一棵新的树#xff0c;若父选中#xff0c;子自动选中#xff0c;子取消#xff0c;父不取消#xff0c;子选中#xff0c;所有的父节点自动取消。同时支持模糊检索#xff0c;会检索出所有包含该内容的关联节点。 2、环境准…1、先上效果
树型控件选中项形成一棵新的树若父选中子自动选中子取消父不取消子选中所有的父节点自动取消。同时支持模糊检索会检索出所有包含该内容的关联节点。 2、环境准备
1、react18
2、antd 4
3、代码实现
原理利用antd的tree组件可以通过设置Tree组件的checkable属性为true启用了多选功能当节点被选中或取消选中时会触发onCheck事件我们可以在该事件处理函数中更新checkedKeys状态 通过控制checkedKeys来实现你想要的选中,核心代码如下
checkStrictly设置为true表示子节点选择受控 DirectoryTree...checkable{checkable}expandedKeys{expandedKeys}treeData{treeData || []}checkedKeys: checkKeys,checkStrictly: true,onCheck: (selectedKeys: any, other) {// 当前节点的所有下级子节点const childrenNodeKeys getAllChildrenNodeKey(other?.node);const node: any other?.node;if (other?.checked) {// 当前节点的所有上级父节点const parentKeys Array.isArray(node?.parentId) ? node?.parentId : [];let currentSelectedKeys [...selectedKeys?.checked, ...parentKeys, ...childrenNodeKeys].filter((item: any, i: number, self: any): item is React.Key !!(item self?.indexOf?.(item) i),);setCheckKeys?.(currentSelectedKeys);onCheck?.(currentSelectedKeys)} else {const currentSelectedKeys (selectedKeys?.checked || []).filter(((key: string) !childrenNodeKeys.includes(key) key ! node?.rowId))setCheckKeys(currentSelectedKeys);onCheck?.(currentSelectedKeys);}}/ 当前节点的所有下级子节点 const getAllChildrenNodeKey (node: any) {const result: any [];const getChildrenKey (childrenList: any) {if (childrenList childrenList.length 0) {childrenList.forEach((item: any) {if (item?.rowId) {result.push(item?.rowId)}if (item?.children item?.children.length 0) {getChildrenKey(item?.children || []);}});}}getChildrenKey(node?.children || []);return result;}
tree属性如下
allowDrop是否允许拖拽时放置在该节点({ dropNode, dropPosition }) boolean-autoExpandParent是否自动展开父节点booleanfalseblockNode是否节点占据一行booleanfalsecheckable节点前添加 Checkbox 复选框booleanfalsecheckedKeys受控选中复选框的树节点注意父子节点有关联如果传入父节点 key则子节点自动选中相应当子节点 key 都传入父节点也自动选中。当设置 checkable 和 checkStrictly它是一个有checked和halfChecked属性的对象并且父子节点的选中与否不再关联string[] | {checked: string[], halfChecked: string[]}[]checkStrictlycheckable 状态下节点选择完全受控父子节点选中状态不再关联booleanfalsedefaultCheckedKeys默认选中复选框的树节点string[][]defaultExpandAll默认展开所有树节点booleanfalsedefaultExpandedKeys默认展开指定的树节点string[][]defaultExpandParent默认展开父节点booleantruedefaultSelectedKeys默认选中的树节点string[][]disabled将树禁用booleanfalsedraggable设置节点可拖拽可以通过 icon: false 关闭拖拽提示图标boolean | ((node: DataNode) boolean) | { icon?: React.ReactNode | false, nodeDraggable?: (node: DataNode) boolean }falseconfig: 4.17.0expandedKeys受控展开指定的树节点string[][]fieldNames自定义节点 title、key、children 的字段object{ title: title, key: key, children: children }4.17.0filterTreeNode按需筛选树节点高亮返回 truefunction(node)-height设置虚拟滚动容器高度设置后内部节点不再支持横向滚动number-icon自定义树节点图标。ReactNode | (props) ReactNode-loadData异步加载数据function(node)-loadedKeys受控已经加载的节点需要配合 loadData 使用string[][]multiple支持点选多个节点节点本身booleanfalserootStyle添加在 Tree 最外层的 styleCSSProperties-4.20.0selectable是否可选中booleantrueselectedKeys受控设置选中的树节点多选需设置 multiple 为 truestring[]-showIcon是否展示 TreeNode title 前的图标没有默认样式如设置为 true需要自行定义图标相关样式booleanfalseshowLine是否展示连接线boolean | { showLeafIcon: ReactNode | ((props: AntTreeNodeProps) ReactNode) }falseswitcherIcon自定义树节点的展开/折叠图标ReactNode | ((props: AntTreeNodeProps) ReactNode)-renderProps: 4.20.0titleRender自定义渲染节点(nodeData) ReactNode-4.5.0treeDatatreeNodes 数据如果设置则不需要手动构造 TreeNode 节点key 在整个树范围内唯一array{key, title, children, [disabled, selectable]}-virtual设置 false 时关闭虚拟滚动booleantrue4.1.0onCheck点击复选框触发function(checkedKeys, e:{checked: boolean, checkedNodes, node, event, halfCheckedKeys})-onDragEnddragend 触发时调用function({event, node})-onDragEnterdragenter 触发时调用function({event, node, expandedKeys})-onDragLeavedragleave 触发时调用function({event, node})-onDragOverdragover 触发时调用function({event, node})-onDragStart开始拖拽时调用function({event, node})-onDropdrop 触发时调用function({event, node, dragNode, dragNodesKeys})-onExpand展开/收起节点时触发function(expandedKeys, {expanded: boolean, node})-onLoad节点加载完毕时触发function(loadedKeys, {event, node})-onRightClick响应右键点击function({event, node})-onSelect点击树节点触发function(selectedKeys, e:{selected: boolean, selectedNodes, node, event})- 关注我并且留言发源码
或者自动下载
https://download.csdn.net/download/yalywq/88814803?spm1001.2014.3001.5503
