@aliretail/react-materials-components
Version:
55 lines (45 loc) • 5.08 kB
Markdown
---
title: FilterSelectorDialog-API
order: 1
category: UI
description: FilterSelectorDialog 组件描述
screenshot: https://gw.alicdn.com/imgextra/i2/O1CN01yW3hCD1M8CnqeKFlq_!!6000000001389-2-tps-90-90.png
---
添加货品等的弹窗
## API FilterSelectorDialog
| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- | ---- | ---------------- | -------- | ----------------------------- |
| title | 对话框标题 | Y | string | '' | 参考 fusion Dialog title 使用 |
| dialogWidth | 弹框宽度 | N | number | 600 | |
| dialogHeight | 弹框高度 | N | number | 700 | |
| children | 配置打开弹窗 Button 按钮-子组件，使用详见 demo | Y | Element | - | |
| onChange | `对话框点击确定触发的回调 (valueList,valuePrimaryKeyList)=>void; valueList:返回选中的列表 valuePrimaryKeyList:接收值为该行数据的primaryKey的值` | Y | function | () => {} | |
| ...others | 继承 FilterContent | Y | ...FilterContent | - | |
## API FilterSelectorDialog.InnerForm
| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
| ------ | ---- | ---- | ---- | ------ | ---- |
| appCode | 应用code | N | string | | |
| apiCode | API code | N | string | | |
| url | 如果没有对应appCode 和 apiCode, 可以直接设置url | N | string | | |
| filterConfigList | 筛选框类型 | Y | `<array>filterConfigListItem` | [] | |
| columns | 列表表头 | Y | array | [] | 参考fusion Table columns 属性使用 |
| title | 对话框标题 | Y | string | '' | 参考fusion Dialog title使用 |
| dialogWidth | 弹框宽度 | N | number | 600 | |
| dialogHeight | 弹框高度 | N | number | 700 | |
| mode | 选择模式 | N | `'multiple' | 'single'` | multiple | |
| loadType | 分页类型: 页码分页 | 滚动加载 | N | `'page' | 'scroll'` | page | |
| selectedRowList | 设置时，与rowSelection同时设置，保证已选择不同页码数据时，再次打开能拿到之前选择的所有数据 | N | Array | [] | |
| requestExtraParams | 接口访问额外的参数 | N | `Record<string, any>` | {} | 如果额外参数和filter相应的key相同，则filter部分会覆盖额外参数内的值 |
| primaryKey | 获取的数据的主键，如果给定的数据源中的属性不包含该主键，会造成选择状态全部选中 | N | String | 'id' | |
| onSelected | `对话框选择时触发的回调 (valueList,valuePrimaryKeyList)=>void; valueList:返回选中的列表 valuePrimaryKeyList:接收值为该行数据的primaryKey的值` | Y | function | () => {} | |
| rowSelection | 设置table的rowSelection，除selectedRowKeys，onChange，mode之外(参考https://fusion.alibaba-inc.com/pc/component/basic/table中rowSelection用法) | N | object | {} | |
| hasTableBorder | 设置表格是否有边框 | N | boolean | false | |
| tablePageSizeList | 设置表格分页器可选页码列表 | N | array | AliretailTableDefaultPageSizeList(tableX) | | 参考tableX中的AliretailTableDefaultPageSizeList
| maxSelectLength | 最大选择数量，设置最大数量小于等于0时，则不做限制 | N | boolean | 0 | |
| [不推荐使用]selectedRowKeys | 设置了此属性,将rowSelection变为受控状态,接收值为该行数据的primaryKey的值 | N | Array | [] | 请使用 selectedRowList 代替，若使用 selectedRowKeys 会导致 onSelected 时获取到的两个参数数据不一致 |
## API filterConfigListItem
| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
| ---------------- | ---------------------- | ---- | ------ | ------ | ---- |
| code | 筛选 key | Y | string | '' | |
| codeName | 筛选名称 | Y | string | '' | |
| inputPlaceholder | 筛选输入框 placeholder | N | string | '' | |