72 lines
1.8 KiB
JavaScript
72 lines
1.8 KiB
JavaScript
/*
|
|
* 自定义多选下拉框
|
|
* 支持搜索
|
|
* @Author: 黎永顺
|
|
* @Date: 2024/9/13
|
|
* @Wechat:
|
|
* @Email: 971387674@qq.com
|
|
* @description:
|
|
*/
|
|
import React, { Component } from "react";
|
|
import { WeaLocaleProvider } from "ecCom";
|
|
import classNames from "classnames";
|
|
import { Button, Select } from "antd";
|
|
import "./index.less";
|
|
|
|
const getLabel = WeaLocaleProvider.getLabel;
|
|
const Option = Select.Option;
|
|
|
|
class Index extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
loading: false, data: [], activeKey: "", dropdownWidth: 200
|
|
};
|
|
this.selectedData = {};
|
|
}
|
|
|
|
componentDidMount() {
|
|
const { dropdownWidth } = this.state;
|
|
const w = $(this.refs.customSelectMui).outerWidth();
|
|
if (dropdownWidth < w) {
|
|
this.setState({ dropdownWidth: w });
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { data, dropdownWidth } = this.state;
|
|
const clsname = classNames({
|
|
"mr12": true,
|
|
"wea-associative-search-mult": true
|
|
});
|
|
return (
|
|
<div className={`wea-associative-search ${clsname}`} ref="customSelectMui">
|
|
<Select
|
|
{...this.props}
|
|
hasScroll={false}
|
|
hideSelected={true}
|
|
transitionName=""
|
|
animation=""
|
|
multiple={true}
|
|
notFoundContent=""
|
|
defaultActiveFirstOption={true}
|
|
showArrow={false}
|
|
filterOption={false}
|
|
defaultValue={selectedValues}
|
|
value={selectedValues}
|
|
dropdownStyle={{ minWidth: dropdownWidth }}
|
|
onSearch={_.debounce(this.handleSearch, 400)}
|
|
onChange={this.handleChange}
|
|
>
|
|
{options}
|
|
</Select>
|
|
<div className="ant-input-group-wrap">
|
|
<Button type="ghost" icon="search" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Index;
|