Screening 筛选控件

筛选表单控件。

何时使用

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

代码演示

数据源

绑定数据源。

Screening筛选控件 - 图1

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

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