---
title: 内置的Cell渲染模板
order: 3
---

```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { YwTable, YwTag } from '@ywfe/yw-design';
import 'antd/dist/antd.css';

const statusColumn = [
  {
    title: '通用样式',
    component: 'Status',
    dataIndex: 'statusName',
    componentProps: {
      dataSource: [
        { value: '处理中', color: 'warning' },
        { value: '审批通过', color: 'success' },
        { value: '审批拒绝', color: 'error' },
        { value: '已撤销', color: 'info' },
      ],
      renderExtra: (data, record) => {
        console.log(data, record);
        return <YwTag styleType="hollow" color="error" text="自定义内容" size="s" />;
      },
    },
    // 字段filter
    // formatValues: (_, record) => {
    //   const statusMap = {
    //     1: '处理中',
    //     2: '审批通过',
    //     3: '审批拒绝',
    //   };
    //   return statusMap[record.status];
    // },
    width: 260,
  },
  {
    title: '字典数据（推荐）',
    component: 'Status',
    dataIndex: 'status',
    componentProps: {
      dict: [
        {
          dictName: '处理中',
          dictValue: 1,
          extParams: {
            color: 'warning',
          },
          subList: null,
        },
        {
          dictName: '审批通过',
          dictValue: 2,
          extParams: {
            color: 'success',
          },
          subList: null,
        },
      ],
    },
    width: 260,
  },
  {
    title: '标签样式',
    component: 'Tags',
    dataIndex: 'tagName',
    componentProps: {
      dataSource: [
        // 同 antd Tags color属性
        { value: '处理中', color: 'warning' },
        { value: '审批通过', color: 'success' },
        { value: '审批拒绝', color: 'error' },
        { value: '已撤销', color: 'info' },
      ],
    },
    // 字段filter
    formatValues: (_, record) => {
      const statusMap = {
        1: '处理中',
        2: '审批通过',
        3: '审批拒绝',
      };
      return statusMap[record.status];
    },
    width: 260,
  },
  {
    title: '多条样式',
    component: 'Tags',
    dataIndex: 'tagName',
    componentProps: {
      dataSource: [
        // 同 antd Tags color属性
        { value: '处理中', color: 'warning' },
        { value: '审批通过', color: 'success' },
        { value: '审批拒绝', color: 'error' },
        { value: '已撤销', color: 'primary' },
        { value: '已过期', color: 'error' },
        { value: '待流转', color: 'default' },
      ],
      tagStyle: {
        marginBottom: '8px',
      },
    },
    formatValues: (_, record) => {
      const tagAMap = {
        1: '处理中',
        2: '审批通过',
        3: '审批拒绝',
      };
      const tagBMap = {
        1: '已过期',
        2: '待流转',
      };
      return [tagAMap[record.tagA], tagBMap[record.tagB]]; // [tagA,tagB]
    },
    width: 260,
  },
  {
    title: '进度条',
    component: 'Progress',
    dataIndex: 'percent',
    width: 160,
    componentProps: {
      format: (p) => {
        return p === '60' ? '已完成' : p + '%';
      },
    },
  },
];
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,
            statusName: '处理中',
            tagA: 1,
            percent: '60',
            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,
            percent: '60',
            tagB: 2,
          },
        ],
        totalNumber: 100,
      });
    }, 1500);
  });
};
const infoColumn = [
  {
    title: '商品信息',
    dataIndex: 'info',
    component: 'DetailInfo',
    componentProps: {
      type: 'goods', // 商品类型 后面还会补充其他类型
    },
    width: 900,
    formatValues: (_, record) => {
      return {
        isEmpty: record.id === 2,
        emptyText: '未匹配商品信息',
        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,
          tag: <YwTag text="新品" color="#07C160" />, // 商品标题标签
          onClick: () => {},
        },
        tooltip: {
          label: '商品ID',
          value: '34234324324234',
          isCopy: true,
        },
        tags: [
          { color: '#0B8746', value: '合格一等品' },
          { color: '#EF813E', bizName: 'amount', value: ['佣金', '18.00%'] },
          { value: '零售', visible: true, tooltip: { value: '这是个没人用的功能' } },
          { value: '正价' },
          { value: '快手CPS' },
          { value: '已质检', visible: true, tooltip: { value: '这是个没人用的功能' } },
          { value: '组合品' },
        ],
        items: [
          {
            label: '规格',
            value: '34234324324234',
            row: 1,
            isCopy: true,
            onClick: () => {},
          },
          {
            label: '',
            tooltip: true,
            value: '黑色S 仅100件',
          },
        ],
      };
    },
  },
  {
    title: '商家信息',
    component: 'MultipleCol',

    // 数据聚合成新的字段group
    formatValues: (_, record) => {
      return [
        {
          label: '类目',
          value: '家居百货',
        },
        {
          label: '品牌',
          value: 'Basic House',
          icon: <YwTag text="普通" color="#0077FF" size="s" style={{ marginLeft: 4 }} />,
        },
        {
          label: '商家',
          value: '中海洋(成都)酒业有限公司',
          tooltip: true,
          icon: <YwTag bizName="level" text="L3" style={{ marginLeft: 4 }} />,
        },
      ];
    },
    width: 260,
  },
];
const textColumn = [
  {
    title: '一行省略',
    dataIndex: 'title',
    component: 'LongText2Ellipsis',
    componentProps: {
      row: 1,
    },
    width: 150,
  },
  {
    title: '可点击',
    dataIndex: 'title',
    component: 'LongText2Ellipsis',
    componentProps: {
      row: 1,
      onClick: (data) => {
        console.log(data);
      },
    },
    width: 100,
  },
  {
    title: '两行省略',
    dataIndex: 'title',
    component: 'LongText2Ellipsis',
    componentProps: {
      row: 2,
    },
    width: 100,
  },
  {
    title: '空数据',
    dataIndex: 'emptyData',
    component: 'EmptyCol',
  },
  {
    title: '可复制',
    dataIndex: 'title',
    component: 'LongText2Ellipsis',
    componentProps: {
      isCopy: true,
    },
    width: 100,
  },
  {
    title: '自定义复制内容',
    dataIndex: 'title',
    component: 'CopyCol',
    width: 200,
    componentProps: {
      value: (record) => {
        return '自定义复制内容';
      },
      render: (record) => {
        return <div>自定义内容</div>;
      },
    },
  },
  {
    title: 'tooltip',
    dataIndex: 'title',
    component: 'LongText2Ellipsis',
    componentProps: {
      tooltip: true,
    },
    width: 100,
  },
  {
    title: '聚合信息展示',
    dataIndex: 'title',
    component: 'MultipleCol',
    componentProps: {},
    width: 200,
    formatValues: (_, record) => {
      return [
        {
          label: '标签1',
          value: record.person,
          isCopy: true,
          visible: true,
        },
        {
          label: '标签2',
          value: record.event,
          onClick: (record) => {
            console.log(record);
          },
        },
        {
          label: '标签3',
          value: record.time,
          tooltip: true,
        },
      ];
    },
  },
];
const App = () => {
  return (
    <div>
      <h3>文本展示 </h3>
      <YwTable columns={textColumn} rowKey="id" getTableData={getTableData} />
      <h3>状态相关 </h3>
      <YwTable columns={statusColumn} rowKey="id" getTableData={getTableData} />
      <h3>图文详情信息展示 </h3>
      <YwTable columns={infoColumn} rowKey="id" getTableData={getTableData} />
    </div>
  );
};

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