---
title: 数据列表+预览 单独使用
order: 3
docGenIncludes:
  - src/components/YwDrawerSelector/index.tsx
---

```jsx
import React, { useState,useEffect } from 'react';
import ReactDOM from 'react-dom';
import {Drawer, Divider, Tooltip, Row, Col} from 'antd'
import { YwDrawerSelector, YwButton } from '@ywfe/yw-design';
import { unionBy, xorBy } from 'lodash';
import 'antd/dist/antd.css';
const PreviewList = YwDrawerSelector.PreviewList;
const DataList = YwDrawerSelector.DataList;

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 }],
  },
   {
    title: '寄样标签',
    name: 'tag',
    component: 'Select',
    type: 'string',
    props: {
      inset: true,
    },
    enum: [{ value: 1, label: 1 }, { value: 2, label: 2 }],
  },
]
const onSubmit = (keys,data)=>{
  return new Promise((resolve,reject) => {
    setTimeout(() => {
      resolve()
    }, 1500)
  })
}
const onClose = ()=>{
  
}

   const buttons = [
           {
              type: 'filter',
              children: (
                <Divider type='vertical'/>
              ),
            },
            {
              type: 'filter',
              btnText: '过滤条件',
              name:'isChecked',
              visible: true,
              defaultValue:false,
              // onChange
            },
            {
              type: 'batch',
              btnText: '批量移除',
              onClick: (keys, _, reload) => {
                setTimeout(reload({unSelectKeys:keys}), 1000);
              },
            }
        ];
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 renderItemMain = (record) => (
    <>
      <Row>
        <Col span="18">Apple Mac mini 新款八核M1芯片 8G 512G SSD 台…</Col>
      </Row>
      <Row gutter="6">
        <Col span="4">直播价：1999</Col>
        <Col span="1"><Divider type='vertical'/></Col>
        <Col span="8">类目：酒水饮料/白酒/茅台</Col>
      </Row>
    </>
  );
  const renderItemFooter = (record) => (
    <>
      <span>坑位费：5万</span>
      <span>线上佣金：30%</span>
    </>
  );
  const renderItemShop = (record)=>{
  return <Row>
  <Col span = '12'>店铺信息</Col>
  </Row>
}
  const formatValues = (record) => {
    return {
      itemTags: [
        { color: '#108ee9', value: '有样品', visible: true },
      ],
      imgUrl:"https://daichongtest.oss-cn-hangzhou.aliyuncs.com/goods/config/2022/07/0e363d69-5988-4325-96d2-4eda40daa90b.jpg",
    //   renderItemImg: (record) => (
    //     <img
    //       src="https://daichongtest.oss-cn-hangzhou.aliyuncs.com/goods/config/2022/07/0e363d69-5988-4325-96d2-4eda40daa90b.jpg"
    //       alt=""
    //     />
    //   ),
      renderItemMain,
      renderItemShop,
      renderItemFooter,
      tags: [
        { value: '零售', visible: true },
        { value: '正价' },
      ],
    };
  };

const App = () => {
    const [visible,setVisible] = useState(false)
    const [selectedData, setSelectedData] = useState([]);
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    const rowKey = 'itemNo';
    const rowSelection = {
    selectedRowKeys,
    hideSelectTotal: true,
    onSelectAll: (selected, _, changeRows) => {
      if (selected) {
        const data = unionBy(changeRows, selectedData, rowKey) || [];
        setSelectedData(data);
        setSelectedRowKeys(
          data.map((v) => {
            return v[rowKey];
          }),
        );
      } else {
        const data = xorBy(selectedData, changeRows, rowKey);
        setSelectedData(data);
        setSelectedRowKeys(
          data.map((v) => {
            return v[rowKey];
          }),
        );
      }
    },
    onSelect: (record, selected) => {
      if (rowSelection.type === 'radio') {
        // 单选 数据覆盖
        setSelectedData(selected ? [record] : []);
        setSelectedRowKeys(selected ? [record[rowKey]] : []);
        return;
      }
      if (selected) {
        const data = unionBy([record], selectedData, rowKey);
        setSelectedData(data);
        setSelectedRowKeys(
          data.map((v) => {
            return v[rowKey];
          }),
        );
      } else {
        setSelectedData(
          selectedData.filter((v) => {
            return v[rowKey] !== record[rowKey];
          }),
        );
        setSelectedRowKeys(
          selectedRowKeys.filter((v) => {
            return v !== record[rowKey];
          }),
        );
      }
    },
  };
    return (
      <div style={{height:'900px'}}>
       <DataList
            formatValues={formatValues}
            // filterProps={filterProps}
            getTableData={getTableData}
            rowSelection={rowSelection}
            pagination={{size: 'small'}}
            listType={'card'}
            rowKey={rowKey}
        />
        <PreviewList
            dataSource={selectedData}
            pageSize={10}
            rowKey={rowKey}
            maxItems={50}
            renderMaxItemsMessageError={(maxItems) => `最多可选 ${maxItems} 个`}
            setStyleBottom={()=>{}}
            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',
              }
            }}}
            deleteItem={(key, data) => {
              setSelectedData(
                selectedData.filter((v) => {
                  return v[rowKey] !== data[rowKey];
                }),
              );
              setSelectedRowKeys(
                selectedRowKeys.filter((v) => {
                  return v !== key;
                }),
              );
            }}
          />
       </div>
    );
}

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