import React, { useState, useCallback } from "react";
import {
DownOutlined,
PlusCircleOutlined,
EditOutlined,
DeleteOutlined,
} from "@ant-design/icons";
import { Tree, Button, Form, Input } from "antd";
import type { TreeDataNode, TreeProps } from "antd";
const treeData11: TreeDataNode[] = [
{
title: "国家管网",
key: "0-0",
children: [
{
title: "北方管道",
key: "0-0-0",
// isLeaf: true,
children: [
{
title: "锦州分公司",
key: "0-0-0-0",
},
],
},
{
title: "南方管道",
key: "0-0-1",
children: [
{
title: "长呼线",
key: "0-0-1-0",
},
],
},
],
},
];
const [selectedKeys, setSelectedKeys] = useState<any>([]);
const [selectedNode, setSelectedNode] = useState<any>(null);
const CustomTreeTitle = ({ node }: any) => {
if (selectedKeys.includes(node.key)) {
return (
<span>
{node.title}
<span style={{ marginLeft: 8 }}>
<PlusCircleOutlined />
<EditOutlined />
<DeleteOutlined />
</span>
</span>
);
}
return <span>{node.title}</span>;
};
const onSelect = (keys: any, info: any) => {
//改动这里 增加一个判断
if (!info.selected) {
setSelectedKeys([info.node.key]);
setSelectedNode(info.node);
return;
}
setSelectedKeys(keys);
};
<Tree
showLine
style={{ backgroundColor: "#fafafa" }}
switcherIcon={<DownOutlined />}
defaultExpandAll
onSelect={onSelect}
treeData={treeData11}
titleRender={(node) => <CustomTreeTitle node={node} />}
selectedKeys={selectedKeys} //高亮问题改动这里
/>
react+antd+ts解决树结构点击高亮显示等问题!
于 2024-03-06 14:43:09 首次发布