filters component

rock-component-filters

过滤项

API

参数名 说明 必填 类型 默认值 备注

DEMO 列表

Simple Usage

Filters 演示 本 Demo 演示基本4组以上筛选条件的情况。

example

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);

One Line

本 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);