---
title: 表格选择器
order: 1
docGenIncludes:
  - src/components/YwTableDialog/index.tsx

---



```jsx
import React, { useState,useEffect } from 'react';
import ReactDOM from 'react-dom';
import { YwTableDialog,YwButton } from '@ywfe/yw-design';
import 'antd/dist/antd.css';

const filterItems = [
  {
    title: '标题',
    name: 'input',
    component: 'Input',
    type: 'string',
    props: {
      inset: true,
      colon: false,
    },
    componentProps: {
      placeholder: '请输入任务标题'
    }
  },
  {
    title: '类型',
    name: 'select',
    component: 'Select',
    type: 'string',
    props: {
      inset: true,
      colon: false,
    },
    enum: [{ value: 1, label: 1 }, { value: 2, label: 2 }],
    componentProps: {}
  },
  {
    type: 'array',
    title: '提交审核时间',
    name: '[startDate1,endDate1]',
    defaultValue: ['2022-07-09', '2022-07-23'],
    component: 'DateRangePicker',
    props: {
      inset: true,
      colon: false,
    },
    componentProps: {
      ranges: ['昨天', '今天', '7天', '30天']
    }
  },
]
const columns = [
  {
    title: '标题',
    dataIndex: 'title',
    component:'LongText2Ellipsis', 
    componentProps:{
    },
    width: 300,
  },
]
const layoutProps = { labelCol: 4, wrapperCol: 20 };
const onSubmit = (keys,data)=>{
  return new Promise((resolve,reject) => {
    setTimeout(() => {
      resolve()
      console.log(keys,data)
    }, 1500)
  })
}
const onClose = ()=>{
  
}
const getTableData = async (props) => {
  console.log('form参数', props);
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        list: [
          {
            id: 1,
            title: '川黛时光童装：清旷之乐 改良版汉服女童褙子一片式齐',
            person: '卓洛',
            event: '事项',
            time: '2022-7-7',
            startTime: '2022-4-8 10:43',
            endTime: '2022-4-8 10:43',
            status: 1,
          },
          {
            id: 2,
            title: '川黛时光童装：清旷之乐 改良版汉服女童褙子一片式齐',
            person: '卓洛2',
            event: '很长很长很长很长很长很长很长很长很长很长的文字',
            time: '2022-7-7',
            startTime: '2022-4-8 10:43',
            endTime: '2022-4-8 10:43',
            status: 2,
          },
        ],
        totalNumber: 100,
        pageSize:10,
      });
    }, 1500);
  });
};


const App = () => {
  const [visible,setVisible] = useState(false)
    return (
      <div>
        <YwButton onClick={()=>{setVisible(true)}} type = 'primary'>打开弹窗</YwButton>

       <YwTableDialog  
          title='表格选择器' 
          visible={visible}
          filterItems={filterItems} 
          getTableData={getTableData}
          columns={columns}
          rowSelection={{
            type:'radio',
          }}
          onOk={(keys,data)=>{
            console.log(keys,data)
          }}
        //   okText='下一步'
          onClose={()=>{setVisible(false)}}
          onOk={(data,keys)=>{
                console.log(data,keys)
          }}
       />
      </div>
    );
}

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