rock-component-filters
过滤项
参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
---|---|---|---|---|---|
Filters 演示 本 Demo 演示基本4组以上筛选条件的情况。
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Filters from '@wx-rock/filters';
const filters = [{
component: 'Input',
label: '筛选条件1:',
key: 'key1',
defaultValue: '默认值',
props: {
placeholder: '输入abc',
default: ''
},
rules: [{
pattern: /^abc$/g
}],
span: 6
}, {
component: 'Input',
label: '筛选条件2:',
key: 'key2',
props: {
placeholder: '输入def',
default: ''
},
rules: [{
pattern: /^abc$/g
}],
span: 6
}, {
component: 'Input',
label: '筛选条件3:',
key: 'key3',
props: {
placeholder: '输入def',
default: ''
},
rules: [{
pattern: /^abc$/g
}],
span: 6
}, {
component: 'Input',
label: '筛选条件4:',
key: 'key4',
props: {
placeholder: '输入def',
default: ''
},
rules: [{
pattern: /^abc$/g
}],
span: 6
}, {
component: 'Input',
label: '筛选条件5:',
key: 'key5',
props: {
placeholder: '输入def',
default: ''
},
rules: [{
pattern: /^abc$/g
}],
span: 6
}, {
component: 'FilterButtons',
label: '',
key: 'key6',
props: {
},
span: 6
}]
class App extends Component {
render() {
return (
<div>
<Filters filters={filters} onSubmit={(...args) => {
console.log('FiltersDemo', ...args)
}}/>
</div>
);
}
}
ReactDOM.render((
<App />
), mountNode);
本 Demo 演示基本4组以下筛选条件时一行显示。
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Filters from '@wx-rock/filters';
const filters = [{
component: 'Search',
label: '输入关键词:',
key: 'key1',
defaultValue: '默认值',
props: {
placeholder: '输入abc',
default: '',
style: {width: '300px'}
},
rules: [{
pattern: /^abc$/g
}],
span: 6
}, {
component: 'FilterButtons',
label: '',
key: 'key5',
props: {
},
span: 6
}]
class App extends Component {
render() {
return (
<div>
<Filters filters={filters} />
</div>
);
}
}
ReactDOM.render((
<App />
), mountNode);