SelectForOperation 添加选项的选择器
select-for-opration
这是继承自Select选择器的变体，除了下面定义的相关属性外，其他的API属性继承与Select。SelectForOperation默认支持通过文本框添加和编辑选项，默认支持对选项的删除。可支持对其他操作项的扩展。
dataSourse的使用
SelectForOpration主要支持props中传入dataSource作为数据源。
注意：1、默认支持对选项的操作项悬浮显示，因此需要dataSource须包含boolean字段operation值为true。2、key值的使用同Select的默认设置。3、添加数据项时默认label和value值相同。
const dataSource = [
{label:'option1', value:'option1'},
{label:'option2', value:'option2'},
{label:'operation',value:'operation' ,operation:true}
]
<SelectForOperation dataSource={dataSource}/>API
| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
|---|---|---|---|---|---|
| value | 当前值，用于受控模式（同Select选择器） | - | any | - | - |
| onChange | Select发生改变时触发的回调 签名:Function(value: mixed, actionType: String, item: mixed) => void 参数: value: {mixed} 选中的值 actionType: {String} 触发的方式, 'itemClick', 'enter', 'tag' item: {mixed} 选中的值的对象数据 (useDetailValue=false有效) |
- | Function | - | - |
| dataSort | 默认选择器添加数据显示下拉菜单的位置 可选值： true：显示在下拉菜单第一条 false：自定义显示下拉菜单的位置 只针对添加类型为input类型有效 |
- | boolean | true | 自定义时，saveOption，deleteOption，value，onChange需要填写，如果有扩展操作，相关的回调函数需要填写 |
| addType | 添加数据项的形式 可选值： 'input'：文本框 'drawer'：抽屉 |
- | String | 'input' | - |
| editType | 编辑数据项的形式 可选值： 'input'：文本框 'drawer'：抽屉 |
- | String | 'input' | - |
| dataSource | 数据源，同Select选择器 | 是 | Array<Object/Boolean/Number/String> | - | 显示操作列需要设置operation字段为true |
| saveOption | 添加项保存的方法 签名：Function(e:Event, operation:boolean ,type:String ,item: Object)=>void 参数： e:{Event}DOM事件对象，返回文本框的值 operation:{boolean}返回为 true，用于判断悬浮显示操作项 type:{String}返回操作类型，'add'为添加，'edit'为编辑 item:{Object}当前操作选项值对象，添加时null |
- | Function | - | - |
| deleteOption | 删除选项的方法 签名：Function(e:Event,item:Object)=>void 参数： e:{Event}DOM事件对象 item:{Object}当前删除项的值对象 |
- | Function | - | - |
| openDrawer | 打开抽屉的方法 签名：Function(isOpen:boolean,type:String,item:Object)=>void 参数：isOpen:{boolean}返回true type:{String}:'add'表示添加时打开抽屉，'edit'表示编辑时打开抽屉 item:{Object}当前操作选项值对象，添加时为null |
- | Function | - | - |
| operationItem | 扩展添加操作项 数组类型，元素为对象，包含两个字段，第一个为 node:{ReactNode}为操作项；第二个为func：{Functon}类型，为回调函数回调函数签名：（e:Event,item:Object）=>void 参数: e:{Event}DOM事件对象 item:{Object}当前操作选项值对象 |
- | Array | null | [ {node:,func:()=>{}},] |
| validator | 校验文本框的方法 签名：Function(val:String,e:Event,type:String)=>String/null 参数： val:{String}当前需要校验的文本框值 e:{Event}DOM事件对象 type:{String}校验的类型，'add'为添加，'edit'为编辑 返回值： {String/null},返回校验信息，必须有返回值，有校验提示返回校验信息，没有提示返回null或者空字符串 |
- | Function | - | - |
| addItemSort | 添加按钮的位置 可选值： 'first':添加按钮在下拉菜单的第一项 'last':添加按钮在下拉菜单的 最后一项 |
- | String | 'first' | - |
| className | 下拉菜单的样式名 | - | String | 'itemlist' | |
| style | 选择器样式 | - | Object | - | {width：300} |
| popupStyle | 下拉菜单的样式 | - | Object | - | {width：300} |
| mode | 选择器模式 可选值： 'single', 'multiple' |
- | String | 'single' | - |
| isOperation | 添加项是否需要悬浮显示操作按钮 | - | boolean | true | - |