优化Select、SelectTree、Cascader

master
LiuJiaNan 2025-11-06 16:28:49 +08:00
parent 25626ef1c0
commit 80f4528a88
5 changed files with 19 additions and 18 deletions

View File

@ -33,7 +33,7 @@ function BasicCascader(props) {
if (!onGetNodePathsIsIncludeOneself && selectedOptions) {
nodePaths = selectedOptions.slice(0, -1);
}
return nodePaths;
return nodePaths || [];
};
const handleChange = (value, selectedOptions) => {

View File

@ -13,6 +13,8 @@ export interface BasicSelectProps extends SelectProps {
idKey?: string;
/** 占位符 */
placeholder?: string;
/** 获取 label */
onGetLabel?: (label: string) => void;
}
/**

View File

@ -14,23 +14,14 @@ function BasicSelect(props) {
...restProps
} = props;
// const handleSelect = (event) => {
// onGetLabel?.(getLabelName({ list: data, status: event, idKey, nameKey }));
// };
//
// const handleClear = () => {
// onGetLabel?.(undefined);
// };
const handleChange = (event) => {
if (event)
onGetLabel?.(getLabelName({ list: data, status: event, idKey, nameKey }));
else
onGetLabel?.(undefined);
}
onGetLabel?.("");
};
return (
// <Select placeholder={`请选择${placeholder}`} showSearch allowClear onClear={handleClear} onSelect={handleSelect} {...restProps}>
<Select placeholder={`请选择${placeholder}`} showSearch allowClear onChange={handleChange} {...restProps}>
{data.map((item) => {
const value = item[idKey];

View File

@ -19,6 +19,8 @@ export interface BasicSelectTreeProps extends TreeSelectProps {
placeholder?: string;
/** 控制只能选择到第几级 */
level?: number;
/** 获取 label */
onGetLabel?: (label: string) => void;
}
/**
@ -26,4 +28,4 @@ export interface BasicSelectTreeProps extends TreeSelectProps {
*/
declare const BasicSelectTree: FC<BasicSelectTreeProps>;
export default BasicSelectTree;
export default BasicSelectTree;

View File

@ -6,7 +6,8 @@ import { getTreeNodePaths, processTreeDataByLevel } from "../../../utils";
*/
function BasicSelectTree(props) {
const {
onSelect,
onChange,
onGetLabel,
onGetNodePaths,
onGetNodePathsIsIncludeOneself = true,
placeholder = "",
@ -28,8 +29,8 @@ function BasicSelectTree(props) {
})
: treeData;
const handleSelect = (value, node, extra) => {
if (value.length > 0) {
const handleChange = (value, label, extra) => {
if (value) {
const parentNodes = getTreeNodePaths({
data: treeData,
targetId: value,
@ -38,8 +39,13 @@ function BasicSelectTree(props) {
isIncludeOneself: onGetNodePathsIsIncludeOneself,
});
onGetNodePaths?.(parentNodes);
onGetLabel?.(parentNodes[parentNodes.length - 1][nameKey]);
}
onSelect?.(value, node, extra);
else {
onGetNodePaths?.([]);
onGetLabel?.("");
}
onChange?.(value, label, extra);
};
return (
@ -50,7 +56,7 @@ function BasicSelectTree(props) {
popup: { root: { maxHeight: 400, overflow: "auto" } },
}}
placeholder={`请选择${placeholder}`}
onSelect={handleSelect}
onChange={handleChange}
allowClear
treeData={processedTreeData}
fieldNames={{ label: nameKey, value: idKey, children: childrenKey }}