react-mul-select 为一款基于react实现的
Created By ancf - (博客地址)[https://kafeihaoka.github.io/myBlog.html#/welcome]
react-mul-select 为一款基于react实现的二级多选下拉框组件。
DEMO示例地址：https://kafeihaoka.github.io/react-mul-select/
安装依赖npm i react-mul-select -S
API 介绍| Property | Description | Type | Default |
|---|---|---|---|
| containerClassName | 组件外层容器className | string | - |
| popClass | 弹框容器className | string | - |
| isOpen | 是否展开 - showInput为false时生效；使用场景：自定义外部input框;需在onOk控制props isOpen | bool | - |
| showInput | 是否展示input | bool | true |
| selectAllMainValue | value all | object | - |
| selectAllSubValue | subValue all | object | - |
| value | value list | array | - |
| options | original options | array | - |
| onOk | 关闭下拉框的事件 | func | - |
| disabled | 禁止点击 | bool | true |
| onChange | change事件 | bool | true |
import ReactMulSelect from "react-mul-select";
const MulSelectDemo = () => {
const [selectValue, setSelectValue] = useState(['0-0']);
const [isOpen, setIsOpen] = useState(false);
const options = [
{
"children": [
{
"value": "0",
"label": "苹果"
},
{
"value": "1",
"label": "香蕉"
}
],
"value": "0",
"label": "水果"
},
{
"children": [
{
"value": "0",
"label": "玉米"
},
{
"value": "1",
"label": "紫薯"
},
{
"value": "2",
"label": "地瓜"
}
],
"value": "1",
"label": "蔬菜"
}
]
const selectAllMainValue = {value:'-1',label:'全部品牌'};
const selectAllSubValue = {value:'-1',label:'全部账号'};
const handleOk1 = (v) => {
console.log(v)
}
const handleOk2 = (v) => {
console.log(v)
}
const openEffectPlan = () => {
setIsOpen(!isOpen)
}
return (
<div>
<ReactMulSelect
showInput={false}
isOpen={isOpen}
selectAllMainValue={selectAllMainValue}
selectAllSubValue={selectAllSubValue}
value={selectValue}
options={options}
onOk={handleOk1}>
<h1 onClick={openEffectPlan}>Component Test</h1>
</ReactMulSelect>
<ReactMulSelect
showInput
selectAllMainValue={selectAllMainValue}
selectAllSubValue={selectAllSubValue}
value={selectValue}
options={options}
onOk={handleOk2} />
</div>
);
}
ReactDOM.render(<MulSelectDemo />, mountNode);
相关资料
react component react-mul-select
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
