---
title: 基础表格弹窗
order: 1



---


```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', 

  },
  {
    title: '操作',
    component: 'Operates',
    dataIndex: 'operate',
    fixed: 'right',
    componentProps: {
      value:[
        {
          btnText: '查看',
          onClick:(e, record, reload)=>{
          },
        },
      ]
    }
  }
]
const layoutProps = { labelCol: 4, wrapperCol: 20 };

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}
          onTableInit={(ref)=>{}}
          onClose={()=>{setVisible(false)}}
          initialValues={{title:1111}} 
       />
      </div>
    );
}

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