业务场景： 当我们获取tree的key 。 并且提交到服务端进行保存
当进入到详情页。 或者修改的状态下。 会将保存的key 对tree进行勾选赋值 。
import { Tree } from 'antd'; import type { DataNode } from 'antd/es/tree';
import React, { useState } from 'react';
const treeData: DataNode[] = [ { title: '0-0', key: '0-0', children: [ { title: '0-0-0', key: '0-0-0', children: [ { title: '0-0-0-0', key: '0-0-0-0' }, { title: '0-0-0-1', key: '0-0-0-1' }, { title: '0-0-0-2', key: '0-0-0-2' }, ], }, { title: '0-0-1', key: '0-0-1', children: [ { title: '0-0-1-0', key: '0-0-1-0' }, { title: '0-0-1-1', key: '0-0-1-1' }, { title: '0-0-1-2', key: '0-0-1-2' }, ], }, { title: '0-0-2', key: '0-0-2', }, ], }, { title: '0-1', key: '0-1', children: [ { title: '0-1-0-0', key: '0-1-0-0' }, { title: '0-1-0-1', key: '0-1-0-1' }, { title: '0-1-0-2', key: '0-1-0-2' }, ], }, { title: '0-2', key: '0-2', }, ];
const App: React.FC = () => { const [expandedKeys, setExpandedKeys] = useState<React.Key[]>(['0-0-0', '0-0-1']);
const [checkedKeys, setCheckedKeys] = useState<React.Key[]>(['0-0-0']);
const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);
const onExpand = (expandedKeysValue: React.Key[]) => { console.log('onExpand', expandedKeysValue);
setExpandedKeys(expandedKeysValue); setAutoExpandParent(false); };
const onCheck = (checkedKeysValue: React.Key[]) => {
console.log('onCheck', checkedKeysValue);
setCheckedKeys(checkedKeysValue);
};
const onSelect = (selectedKeysValue: React.Key[], info: any) => { console.log('onSelect', info);
setSelectedKeys(selectedKeysValue); };
return (
<Tree
checkable
onExpand={onExpand}
expandedKeys={expandedKeys}
autoExpandParent={autoExpandParent}
onCheck={onCheck} checkedKeys={checkedKeys}
onSelect={onSelect} selectedKeys={selectedKeys}
treeData={treeData} /> ); };
export default App;
以官网的tree为例
地址： 4x.ant.design/components/…
当我们勾选的时候。
子级children 。如果有值 。 且未全部勾选。 那么父级为half状态 【0-0-0-0,0-0-0-1 】 勾选2个值,checkedKeys里面是2个值 子级children 。如果有值 。 全部勾选。 那么父级为勾选状态 【0-0-0-0,0-0-0-1,0-0-0-2,0-0-0 】 勾选3个值，checkedKeys 里面是4个值不是3个值
所以对数据提交。 渲染和筛选的时候。 要注意父级数据的处理。
如果不向服务端提交 0-0-0 。当获取的 详情数据为 【0-0-0-0,0-0-0-1,0-0-0-2 】，树的数据渲染，依然是 4个值的渲染。会自动勾选。 而不会是 ，只勾选了 0-0-0-0,0-0-0-1,0-0-0-2这3个 ， 0-0-0是half。 重点 ,0-0-0 是勾选模式
