---
title: 可选择卡片数据列表
order: 1
---

```jsx
import React, { Component,useState } from 'react';
import ReactDOM from 'react-dom';
import {Row,Col,Divider} from 'antd'
import { YwCardList,YwButton,YwTag } from '@ywfe/yw-design';
import 'antd/dist/antd.css';


const getDataSource = async (props) => {
  console.log('form参数1', 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,
            statusName:'处理中',
            tagA:1,
            tagB:2,
          },
          {
            id: 2,
            title: '川黛时光童装：清旷之乐 改良版汉服女童褙子一片式齐',
            person: '卓洛2',
            event: '事项111',
            time: '2022-7-7',
            startTime: '2022-4-8 10:43',
            endTime: '2022-4-8 10:43',
            status: 2,
            statusName:'审批通过',
            tagA:1,
            tagB:2,
          },
          {
            id: 3,
            title: '川黛时光童装：清旷之乐 改良版汉服女童褙子一片式齐',
            person: '卓洛2',
            event: '事项111',
            time: '2022-7-7',
            startTime: '2022-4-8 10:43',
            endTime: '2022-4-8 10:43',
            status: 2,
            statusName:'审批通过',
            tagA:1,
            tagB:2,
          },
          {
            id: 4,
            title: '川黛时光童装：清旷之乐 改良版汉服女童褙子一片式齐',
            person: '卓洛2',
            event: '事项111',
            time: '2022-7-7',
            startTime: '2022-4-8 10:43',
            endTime: '2022-4-8 10:43',
            status: 2,
            statusName:'审批通过',
            tagA:1,
            tagB:2,
          },
          {
            id: 5,
            title: '川黛时光童装：清旷之乐 改良版汉服女童褙子一片式齐',
            person: '卓洛2',
            event: '事项111',
            time: '2022-7-7',
            startTime: '2022-4-8 10:43',
            endTime: '2022-4-8 10:43',
            status: 2,
            statusName:'审批通过',
            tagA:1,
            tagB:2,
          },
        ],
        totalNumber: 100,
      });
    }, 1500);
  });
};
const renderItemMain = (record)=>
        <>
            <Row>
                <Col span = '24'><YwTag text='推荐' color='#F15A5A'/>Apple Mac mini 新款八核M1芯片 8G 512G SSD 台…</Col>
            </Row>
            <Row gutter='6'>
                <Col span = '4'>直播价：1999</Col>
                <Col span = '7'>类目：酒水饮料/白酒/茅台</Col>
            </Row>
        </>
const renderItemShop = (record)=>{
  return <Row>
  <Col span = '12'>店铺信息</Col>
  </Row>
}
const renderItemFooter = (record)=> <><span>坑位费：5万</span><span>线上佣金：30%</span></>;

const formatValues =  (record) => {
      return {
        itemTags:[{color:'success',value:'有样品',visible:true},{color:'#2db7f5',value:'正价'}],
        //imgUrl 和 renderItemImg任选
        // 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:'正价'}],
        operates:[
          {btnText:'移除',onClick:(key,reload)=>{setTimeout(reload({unSelectKeys:[key]}), 1000)}},
        ]
      };
    };

    const buttons = [
           {
              type: 'filter',
              children: (
                <Divider type='vertical'/>
              ),
            },
            {
              type: 'filter',
              btnText: '过滤条件',
              name:'isChecked',
              visible: true,
              // onChange
            },
            {
              type: 'batch',
              btnText: '批量移除',
              onClick: (keys, _, reload) => {
                setTimeout(reload({unSelectKeys:keys}), 1000);
              },
            }
        ];
const App = ()=> {
  const [filterProps,setFilterProps] = useState({title:2})
    return (
      <div>
        <YwCardList 
          rowKey='id' 
          formatValues={formatValues} 
          getDataSource={getDataSource} 
          // pagination={{}} 
          confirmText='提 交'
          filterProps={filterProps}
          confirmDisabled={false}
          confirmLoading={false}
          // footerStyle={{position:'fixed',bottom:'0',width:'800px'}}
          buttons={buttons}  
          rowSelection = {{
              getCheckboxProps: (record) => ({
                disabled: record.id === 1, // Column configuration not to be checked
              })
          }}
          onSubmit={(value,reload)=>{
            console.log(value,reload)
        }} />
      
      </div>
    );
}

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