I. Introduction
Use antd's treecomponents to implement the following module tree, click the title to request the data in the table below it, and click the operation icon next to the title to execute the corresponding addition, deletion and modification functions:
2. Implementation plan
1. Encapsulate a method for setting the title of the tree, and change the state through the switch to control whether the icon button is visible:
Process tree data (name, children)
const setTree = (module_data: any) => {
return module_data.map((item: any) => {
let _json = {
...item };
_json.name = setTreeTitle(item);
_json.children = item.children ? setTree(item.children) : [];
return _json;
});
};
Assigned to TreetreeData:
<Tree
...
treeData={
setTree(treeData)}
...
fieldNames={
{
title: 'name', key: 'id', children: 'children' }}
/>
2. When the tree title is selected, the method to refresh the list is called:
onSelect={
(value: any, e: any) => {
if (e.selected) {
treeSelectFunc(value[0]);
}
}}
3. But the pit that needs to be noted is that because I added the delete function, when the delete operation is performed, if the tree is in the selected state, an error will be reported, because the method of refreshing the list will be called in the selected state, but the data has been deleted by me. , which may result in an error:
So we need to create a state to store the currently selected data:
const [selectId, setSelectId] = useState<any>(null);
Then onSelectjudge whether the newly selected data is the current data in the method, and if so, the request method is no longer executed:
onSelect={
(value: any, e: any) => {
const selectValue = value[0]
if (e.selected && selectValue !== selectId) {
treeSelectFunc(selectValue);
setSelectId(selectValue)
}
}}
This solves the problem of possible errors when deleting data.
3. Summary
The purpose of posting this article is that it has not been posted for a long time, and the activity has dropped a lot! The overall ranking of the weekly rankings has been falling again and again, so the first water is a steady wave.
When you are free, you still have to insist on writing to consolidate and improve yourself.