React+antd实现table的简单封装及render的使用

1.antd-table组件的强大功能

antd链接： https://ant.design/components/table-cn/#components-table-demo-basic

2.基本用法

import { Space, Table, Tag } from 'antd';
import React from 'react';
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    render: (text) => <a>{text}</a>,
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
    render: (_, { tags }) => (
      <>
        {tags.map((tag) => {
          let color = tag.length > 5 ? 'geekblue' : 'green';

          if (tag === 'loser') {
            color = 'volcano';
          }

          return (
            <Tag color={color} key={tag}>
              {tag.toUpperCase()}
            </Tag>
          );
        })}
      </>
    ),
  },
  {
    title: 'Action',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
        <a>Invite {record.name}</a>
        <a>Delete</a>
      </Space>
    ),
  },
];
const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
];

const App = () => <Table columns={columns} dataSource={data} />;

//数据源 dataSource ,自己定义的json数据或者后台传入数据

export default App;

Column属性用法

 

3.表格合并（相同数据）

//定义一个合并函数，接受columns传递的参数，对表格数据进行比较
    // text ：对应本次循环的列文本内容
    // record：对应的本次循环的行内容
    // index：对应本次循环在数组中的索引下标
    //key:为React 需要的 key，建议设置
    //colSpan:表头列合并,设置为 0 时，不渲染
    //rowSpan[行合并]
  const merges= (text, dataSource, index, key) => {
        // 上一行该列数据是否一样
        if (index !== 0 && text === dataSource[index - 1][key]) {
            return 0
        }
        let rowSpan = 1
        // 判断下一行是否相等
        for (let i = index + 1; i < dataSource.length; i++) {
            if (text !== dataSource[i][key]) {
                break
            }
            rowSpan++
        }
        return rowSpan
  }

    const columns = [
        {
            title: 'A',
            dataIndex:0,
            align: 'center',
            //render: 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引
            render: (text, record, index) => {
                const obj = {
                    children: text || '',
                    props: []
                }
                obj.props.rowSpan = merges(text, data, index, 0);
                return obj
            },
        },
]