---
title: 抽屉选择器 表格类型
order: 1

---




此组件内YwFilter 默认itemWidth=305


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

const filterItems = [
  {
    title: '商品信息',
    name: 'input',
    component: 'Input',
    type: 'string',
    props: {
      inset: true,
    },
    componentProps: {
      placeholder: '请输入商品名称'
    }
  },
  {
    title: '招商对接人',
    name: 'select',
    component: 'Select',
    type: 'string',
    props: {
      inset: true,
    },
    enum: [{ value: 1, label: 1 }, { value: 2, label: 2 }],
  },

]
const columns = [
  {
    title: '序号',
    dataIndex: 'id',
    component:'IndexCol', 
    width: 30,
  },
  {
    title: '商品信息',
    dataIndex: 'info',
    component:'DetailInfo', 
    componentProps:{
      type:'goods' // 商品类型 后面还会补充其他类型
    },
    width: 350,
    formatValues: (_, record) => {
      return {
        imgUrl:'https://daichongtest.oss-cn-hangzhou.aliyuncs.com/goods/config/2022/07/0e363d69-5988-4325-96d2-4eda40daa90b.jpg',
        price:['23.00','11111.00'],   // price:'23.00',
        title:{
          value:'商品名称商品名称商品名称商品名称商品名称商品名称商品名称',
          tooltip:true,
          onClick:()=>{}
        },
        tooltip:{
          label:'商品ID',
          value:'34234324324234',
          isCopy:true
        },
         tags:[
          {color:'#EF813E',bizName:'amount',value:['佣金','18.00%'],visible:true},
          {value:'零售',visible:true},
          {value:'正价'}
        ],
        items:[{
              label:'规格',
              value:'34234324324234',
              row:1,
              isCopy:true,
              onClick:()=>{}
            },{
              label:'',
              tooltip:true,
              value:'黑色S 仅100件',
            }]
      };
    },
  },
  {
    title: '关联信息',
    dataIndex: 'id',
    component:'MultipleCol', 
    width: 120,
    formatValues: (_, record) => {
      return [
        {
          label: '类目',
          value: record.event,
          isCopy:true,
        },
        {
          label: '品牌',
          value: record.event,
          onClick:(record)=>{
            console.log(record)
          }
        },
        {
          label: '招商',
          value: record.person,
          tooltip:true,
        },
      ];
    },
  },
  {
    title: '创建时间',
    dataIndex: 'startTime',
    component:'Time', 
  },
]
const onSubmit = (keys,data)=>{
  return new Promise((resolve,reject) => {
    console.log(keys,data)
    setTimeout(() => {
      const callback = ()=>{console.log('自定义成功回调')}
      resolve(callback)
    }, 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,
            itemImg:'https://daichongtest.oss-cn-hangzhou.aliyuncs.com/goods/config/2022/07/0e363d69-5988-4325-96d2-4eda40daa90b.jpg',
            itemNo: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,
                 itemImg:'https://daichongtest.oss-cn-hangzhou.aliyuncs.com/goods/config/2022/07/0e363d69-5988-4325-96d2-4eda40daa90b.jpg',
            itemNo:2
          },
          {
            id: 3,
            title: '川黛时光童装：清旷之乐 改良版汉服女童褙子一片式齐',
            person: '卓洛2',
            event: '很长很长很长很长很长很长很长很长很长很长的文字',
            time: '2022-7-7',
            startTime: '2022-4-8 10:43',
            endTime: '2022-4-8 10:43',
            status: 2,
                 itemImg:'https://daichongtest.oss-cn-hangzhou.aliyuncs.com/goods/config/2022/07/0e363d69-5988-4325-96d2-4eda40daa90b.jpg',
            itemNo:3
          },
          {
            id: 4,
            title: '川黛时光童装：清旷之乐 改良版汉服女童褙子一片式齐',
            person: '卓洛2',
            event: '很长很长很长很长很长很长很长很长很长很长的文字',
            time: '2022-7-7',
            startTime: '2022-4-8 10:43',
            endTime: '2022-4-8 10:43',
            status: 2,
                 itemImg:'https://daichongtest.oss-cn-hangzhou.aliyuncs.com/goods/config/2022/07/0e363d69-5988-4325-96d2-4eda40daa90b.jpg',
            itemNo:4
          },
          {
            id: 5,
            title: '川黛时光童装：清旷之乐 改良版汉服女童褙子一片式齐',
            person: '卓洛2',
            event: '很长很长很长很长很长很长很长很长很长很长的文字',
            time: '2022-7-7',
            startTime: '2022-4-8 10:43',
            endTime: '2022-4-8 10:43',
            status: 2,
                 itemImg:'https://daichongtest.oss-cn-hangzhou.aliyuncs.com/goods/config/2022/07/0e363d69-5988-4325-96d2-4eda40daa90b.jpg',
            itemNo:5
          },
        ],
        totalNumber: 100,
        pageSize:10,
      });
    }, 1500);
  });
};


const App = () => {
    const [visible,setVisible] = useState(false)
    return (
      <>
      <Button onClick={()=>{setVisible(true)}}>点击</Button>
       <YwDrawerSelector 
            btnText = '点我打开' 
            btnType='link' 
            title='选择商品' 
            filterItems={filterItems} 
            getTableData={getTableData}
            columns={columns}
            // rowSelection={{}}
            rowKey='itemNo'
            pagination={{}}
            confirmText='下一步'
            onSubmit={onSubmit}
            visible = {visible}
            onClose={()=>{setVisible(false)}}
            formatPreviewItemValue={(item)=>{return {
              imgUrl:'https://daichongtest.oss-cn-hangzhou.aliyuncs.com/goods/config/2022/07/0e363d69-5988-4325-96d2-4eda40daa90b.jpg',
              id:1,
              itemNo:1,
              tooltip:{
                  title:'商品名称商品名称商品名称商品名称商品名称商品名称商品名称',
                  placement:'topLeft',
              }
            }}}
       />
       </>
    );
}

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