选择列表
@beisen-phoenix/select-list
###changelog 2019-11-21 3.3.44版本 1、新增 fixHeight:是否固定弹层高度(showSearch为true时,可不设置此属性。解决由于搜索导致列表高度变化的问题,设置为true时,弹层的高度始终为初始时展示的高度,最小高度190px)
API
参数 | 说明 | 类型 | 默认值 | 必须 |
---|---|---|---|---|
className | 自定义组件容器class,一般用于覆盖组件默认样式使用 | string | 无 | No |
size | 下拉框的宽度大小(small:170px, middle:340px, auto) | String | auto | No |
fontSize | 字体尺寸(small: 12px, large: 14px) | String | small | No |
showBorder | 是否展示默认边框和阴影 | boolean | false | No |
options | 当前列表数据 | IOption[] | 无 | Yes |
selectedOptions | 当前选中项列表 | IOption / IOption[] | 无 | No |
showSearch | 是否显示搜索框 | boolean | false | No |
placeholder | 显示搜索框时使用:搜索框中的默认提示文字 | String | 搜索 | No |
autoFocus | 显示搜索框时使用:首次挂载时是否自动获取焦点 | boolean | false | 否 |
isLocalSearch | 显示搜索框时使用:是否启用本地搜索,即在当前列表中搜索 | boolean | true | No |
caseSensitive | 搜索时是否大小写敏感 | boolean | false | 否 |
keyWords | 不显示搜索框时使用:需要高亮的关键字 | String | 无 | No |
multiple | 是否多选 | boolean | false | No |
isGroup | 是否分组 | boolean | false | No |
showCheckAll | 非分组列表时使用:是否开启全选功能 | boolean | true | No |
showFooter | 多选时使用:是否显示底部确定按钮 | boolean | false | No |
loading | 数据是否正在加载中(异步请求数据时使用) | boolean | false | No |
fixHeight | 是否固定弹层高度(showSearch为true时,可不设置此属性。解决由于搜索导致列表高度变化的问题,设置为true时,弹层的高度始终为初始时展示的高度,最小高度190px) | boolean | false | No |
onSelect | 点击选项时的回调函数 | (params: ISelectParams, e?: React.MouseEvent) => void | 无 | Yes |
onSearch | 显示搜索框时使用:搜索框内容变化时调用 | (value: string ) => void | 无 | No |
validateSearch | 搜索值自定义验证器 | (val: string) => { value: string, info: string,clearTipAfter?:number } | 无 | No |
onCheckAll | 多选时使用:点击底部确定按钮时回调函数 | ({selectedOptions: ISelectAllParams}) => void | 无 | No |
onConfirm | 显示确定按钮时使用:点击确定的回调函数 | () => void | 无 | No |
IOption
传人的列表数据是数组,每一项的结构如下:
参数 | 说明 | 类型 | 默认值 | 必须 |
---|---|---|---|---|
label | 实际显示的文案 | String | 无 | Yes |
value | 选项的实际值 | String 或 Number | 无 | Yes |
disabled | 禁止该选项 | boolean | false | No |
selected | 是否选中 | String | 无 | No |
children | 分组时使用 当前分组下的数据 | String 或 Number | 无 | No |
ISelectParams
interface ISelectParams {
selectedOptions?: IOption[] // 复选时 当前所有选中项集合
selectOption?: IOption // 当前点击项
index?: number // 单选时 选中项索引 暂未支持 先不要使用
}
ISelectAllParams
interface ISelectAllParams {
selectedOptions?: IOption[] // 复选时 当前所有选中项集合
}
多语言
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
translation | 语言包 用于翻译组件内置常量 | {empty: "这里什么都没有...",confirm: '确定',checkAll: '全选', checkSearchAll: '全选搜索结果', placeholder: '搜索'} |