---
title: 基础用法
order: 1

---

props gridSpan 参数控制item所占宽度

```jsx
import React, { useEffect, useState, Component } from 'react';
import ReactDOM from 'react-dom';
import { YwFilter } from '@ywfe/yw-design';
import 'antd/dist/antd.css';
const items = [
  {
    title: '标题',
    name: 'input',
    component: 'Input',
    type: 'string',
    componentProps: {
      placeholder: '请输入任务标题',
    },
  },
  {
    title: '下拉数据',
    name: 'selectItem',
    component: 'Select',
  
    componentProps: {
      dataSource: [
        { name: 'AAA', code: 1 },
        { name: 'BBB', code: 2 },
      ],
      fieldNames: {label: 'name', value: 'code'}, // 默认 {label: 'label', value: 'value'}
    },
  },
  {
    title: '字典数据',
    name: 'dictItem',
    component: 'Select',
  
    componentProps: {
         dict:[
            {dictName:'待审核',dictValue:1},
            {dictName:'已审核',dictValue:2}
        ]
    },
  },
  {
    title: '发起人',
    name: 'person',
    component: 'Select',
    type: 'string',

    enum: [
      { value: 1, label: 1 },
      { value: 2, label: 2 },
    ],
    componentProps: {
      showSearch: true,
    },
  },
    {
    type: 'string',
    name: 'inputGroup',
    title: '',
    defaultValue:'createTime',
    enum: [
      { value: 'orderTime', label: '下单时间' },
      { value: 'createTime', label: '创建时间' },
    ],

    required:true,
    component: 'InputGroup',
    children:[
      {
       type: 'array',
        title: '',
        name: '[startDate,endDate]',
        required:true,
        component: 'DateRangePicker',
        defaultValue: ['2022-07-09', '2022-07-23'],
        componentProps: {
          ranges: ['昨天', '今天', '7天', '30天'],
          allowClear:true
        },
    }
    ]
  },
  {
    type: 'array',
    title: '完成时间',
    name: '[startDate1,endDate1]',
    component: 'DateRangePicker',
    defaultValue: ['2022-07-09', '2022-07-23'],
 
    componentProps: {
      ranges: ['昨天', '今天', '7天', '30天'],
    },
  },
  {
    type: 'array',
    title: '提交审核时间',
    name: '[startDate2,endDate2]',
    component: 'DateTimeRangePicker',
    defaultValue: ['2022-07-09', '2022-07-23'],
    props: {
      gridSpan: 2 
    },
  },
];

const App = () => {
  const [initialValues,setInitialValues] = useState({})

    return (
      <div>
        <YwFilter items={items} labelInset itemWidth={340} onSubmit={(values)=>{console.log(values)}} initialValues={initialValues}/>
      </div>
    );
}

ReactDOM.render(<App />, mountNode);
```