47 lines
1.2 KiB
JavaScript
47 lines
1.2 KiB
JavaScript
|
import { CloseCircleOutlined } from "@ant-design/icons";
|
||
|
|
import { Select } from "antd";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 可创建选项的选择器组件
|
||
|
|
*/
|
||
|
|
function SelectCreate(props) {
|
||
|
|
const { items, showDelete = true, label = "", maxCount = 1, onDelete, ...restProps } = props;
|
||
|
|
|
||
|
|
const handlerDelete = (option) => {
|
||
|
|
onDelete?.(option);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Select
|
||
|
|
mode="tags"
|
||
|
|
maxCount={maxCount}
|
||
|
|
placeholder={`请选择${label}，无对应选项可直接输入创建选项`}
|
||
|
|
optionRender={option => (
|
||
|
|
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
|
||
|
|
<span>{option.label}</span>
|
||
|
|
{
|
||
|
|
showDelete && (
|
||
|
|
<CloseCircleOutlined
|
||
|
|
style={{ marginRight: 10 }}
|
||
|
|
onClick={(e) => {
|
||
|
|
e.stopPropagation();
|
||
|
|
handlerDelete(option);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{...restProps}
|
||
|
|
>
|
||
|
|
{
|
||
|
|
items.map(item => (
|
||
|
|
<Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
|
||
|
|
))
|
||
|
|
}
|
||
|
|
</Select>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default SelectCreate;
|