ListSelect
容器属性
所有组件配置的第一层均支持容器属性
组件属性 componentsProps
| Name | Type | Default | 是否支持 Variable Pattern | Description |
|---|---|---|---|---|
| className | string | ✔️ | 组件的 className | |
| style | object | 组件的 style | ||
| mode | 'single' | 'multiple' | 'tags' | 'single' | 选择器的模式 | |
| valueType | 'value' | 'item' | 'valueAlwaysArray' | 'itemAlwaysArray' | 'itemAlwaysArray' | Describes the value is a childEnum item or a childEnum item's value, describes whether the value is always an array no matter mode is single or multiple. Given childEnum: [{ value: 1, label: 'AAA' }, { value: 'b', label: 'BBB' }] When valueType is value, value would be 1 or 'b' in single mode, [1] or [1, 'b'] in multiple mode. When valueType is item, value would be { value: 1, label: 'AAA' } in single mode, [{ value: 1, label: 'AAA' }, {...}] in multiple mode. When valueType is valueAlwaysArray, value would be [1] in single mode, [1, 'b'] in multiple mode. When valueType is itemAlwaysArray, value would be [{ value: 1, label: 'AAA' }] in single mode, [{...}, {...}] in multiple mode. | |
| mapping | { value: string, label: string } | { value: 'value', label: 'label' } | value 的映射关系，默认是 { value, label }，如果提供了其他 key，会一并进行保存 | |
| useOriginValue | bool | false | Given mapping: { value: 'id', label: 'name' }, When useOriginValue is true, value would be [{ id: 'xxx',name: 'xxx' }], When useOriginValue is false, value would be [{ value: 'xxx',label: xxx' }], | |
| stringEqual | bool | true | 在比较选项的时候，是否转换成字符串进行比较 | |
| options | { value: string | number | number, label: string } | 可选项 | ||
| dataSource | { token: string, pbcToken: string, listUrl: string } | 数据源 | ||
| dataUrl | ConditionalListOrSinglePropertyPropType(string) | 通过 dataUrl 获取数据。 | ||
| dataFilters | ConditionalListPropertyPropType(DataFilters) | ✔️ | 请求数据源隐藏的固定 filter 条件，无法通过界面进行改变 | |
| sortModel | Array<SortModel> | 数据的排序方式 | ||
| dataResponseKeyPath | string | 'results' | 取 response data 里的某一个子数据来作为结果。 | |
| transformDataResponse | string | 转换取到的数据，使用 eval 表达式，this 指向获取到的数据。 | ||
| translateDataResponse | bool | true | 是否需要翻译请求结果 | |
| debounceTime | number | 200 | 请求数据的 debounce time，会触发 leading。 | |
| defaultValue | object | 数据源的默认数据，会和 api 请求到的数据进行 merge。如果 api 请求返回的是数组，则和数组的每一项进行 merge。如果 api 请求返回的是个对象，则和此对象进行 merge。 | ||
| httpMethod | 'get' | 'post' | 'get' | 数据请求的http方法。 | |
| selectColId | Array<string> | 加载的数据字段，不配置则加载所有字段。 | ||
| needCount | bool | false | 是否需要查询总数 （当为 false 的时候表单 list 接口依然会返回 count，只是此时的 count 永远等于返回数据的长度） | |
| dataExclusion | Array<string> | ✔️ | 在 api 返回的数据中排除某些数据 | |
| itemProps | object | 传给每个子元素顶层 div 的属性 | ||
| selectedItemProps | object | 传给选中子元素顶层 div 的属性 | ||
| showCheckMark | bool | false | 选中项目是否显示打勾 | |
| listStyle | 'style1' | 'style2' | 'style3' | 'style4' | 'style1' | 选项的样式 | |
| size | 'medium' | 'large' | 'medium' | 选项的尺寸，其中高度为最小高度 |
所有其余 componentsProps 将会被传给组件根元素（div）。
SortModel
| Name | Type | Default | Description |
|---|---|---|---|
| colId | string | 排序字段 id | |
| sort | 'asc' | 'desc' | 'asc' | 生序或者降序排序 |
| sortType | 'text' | 'number' | 'date' | 'text' | 值按照什么类型进行排序 |
JS API
通过 formApi.getFieldApi() 获取的接口如下：
| Name | Type | Description |
|---|---|---|
| node | HTML Element | 组件的根 DOM 元素 |
| getOptions | () => array | 获取 Select 的所有可选项 |
| refresh | () => void | 刷新数据 |