Screening 筛选控件

筛选表单控件。

何时使用

用于商城或者大型分类的进行想要的组件的筛选和配置，能够实现快捷的分类信息满足对于品类筛选的需求。

代码演示

数据源

绑定数据源。

Screening筛选控件 - 图1

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { Screening, DataSet } from 'choerodon-ui/pro';
  5. ​
  6. const { ScreeningItem } = Screening;
  7. ​
  8. function handleDataSetChange({ record, name, value, oldValue }) {
  9.   console.log(
  10.     '[dataset newValue]',
  11.     value,
  12.     '[oldValue]',
  13.     oldValue,
  14.     `[record.get('${name}')]`,
  15.     record.toData(),
  16.   );
  17. }
  18. ​
  19. class App extends React.Component {
  20.   ds = new DataSet({
  21.     autoCreate: true,
  22.     data: [{ wear5: ['kidsOverSize', 'thermalUnderWear'] }],
  23.     fields: [
  24.       { name: 'wear0', type: 'object', lookupCode: 'WEAR', label: '衣服分类0' },
  25.       { name: 'wear1', type: 'string', lookupCode: 'WEAR', label: '衣服分类1' },
  26.       { name: 'wear2', type: 'string', lookupCode: 'WEAR', label: '衣服分类2' },
  27.       { name: 'wear3', type: 'string', lookupCode: 'WEAR', label: '衣服分类3' },
  28.       { name: 'wear4', type: 'string', lookupCode: 'WEAR', label: '衣服分类4' },
  29.       { name: 'wear5', type: 'string', lookupCode: 'WEAR', label: '衣服分类5' },
  30.     ],
  31.     events: {
  32.       update: handleDataSetChange,
  33.     },
  34.   });
  35. ​
  36.   render() {
  37.     return (
  38.       <Screening dataSet={this.ds}>
  39.         <ScreeningItem name="wear0" />
  40.         <ScreeningItem
  41.           optionRenderer={({ text, _value, _record }) => `${text}-精品`}
  42.           colProps={{ span: 8 }}
  43.           name="wear1"
  44.         />
  45.         <ScreeningItem name="wear2" />
  46.         <ScreeningItem colProps={{ span: 12 }} name="wear3" />
  47.         <ScreeningItem name="wear4" />
  48.         <ScreeningItem name="wear5" />
  49.       </Screening>
  50.     );
  51.   }

API

Screening

参数说明类型
tagRender顶部的 tag 位置的渲染可以自定义已选值的展示({ labelTitle, TagsProps }) => ReactElement
onChange当值改变触发的回调方法(value: any, oldValue: any) => void

ScreeningItem

参数说明类型默认值
multiple初始打开多选string
name绑定指定 field（必填）string
primitiveValue原始值效果和使用 filed object 类似booleanfalse
onChange修改值触发的回调string
renderer整个选择框的渲染(props: RenderProps) => ReactNode
colProps栅格布局配置ColProps
rowProps栅格布局配置RowProps
optionRenderer自定义控制选项的展示({text, value, record}) => ReactElement;

PropsTab

参数说明类型
text每个小 tag 展示的内容文本string
labeltag 的小标题string
handleClose点击关闭按钮需要触发的方法来删除值(key) => void
key当前字段的标记配合 handleClose 以及定义为唯一值string

更多属性请参考 ViewComponent。