前言

写项目时一直用的都是封装好的table组件，对其内在并未深入了解，自己手动封装一个简单的组件，加深对各类封装好的table组件的了解。接下来的内容都是类比于antd中的table组件

注意： 既然是封装表格，那么就需要使表格尽可能符合多种业务场景，下面我封装的表格只针对业务内容展示进行处理，并不针对样式，样式也可类比。

思考过程

首先要思考table组件需要什么？？？

1. 列数据（columns）- 即表头
2. 行数据（dataSource）- 每一行需要展示的内容

代码实现

接下来进行封装

jsx
//APP.jsx
export default class App extends Component {
  render() {
  // 使用的是antd中所传数据格式
    const dataSource = [
      {
        key: '1',
        name: '胡彦斌',
        age: 32,
        address: '西湖区湖底公园1号',
      },
      {
        key: '2',
        name: '胡彦祖',
        age: 42,
        address: '西湖区湖底公园2号',
      },
      {
        key: '3',
        name: '胡彦文',
        age: 52,
        address: '西湖区湖底公园3号',
      },
      {
        key: '4',
        name: '胡彦武',
        age: 62,
        address: '西湖区湖底公园4号',
      },
    ];

    const columns = [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
        render:(name, item)=>{
          return <p>{name + item.age}</p>
        }
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
      },
      {
        title: '住址',
        dataIndex: 'address',
        key: 'address',
      },
    ];

    return (
      <TablePanel rowKey={'key'} dataSource={dataSource} columns={columns} />
    )
  }
}

jsx
// TablePanel.jsx
export function TablePanel(props) {
  const { dataSource, columns,rowKey } = props
  return (
    <div style={{ margin: 'auto', width: '800px', position: 'absolute', top: '20%', left: '20%' }}>
      <h3>表格</h3>
      <table width="100%" border="1" cellSpacing="0" cellPadding="0"  align="center">
      // 展示表头数据
        <tr>
          {columns.map((item) => {
            return (<th key={item.key}>{item.title}</th>)
          })}
        </tr>
        // * 展示行数据
        {
          dataSource.map(data=>{
            return <tr key={data.key}>
              {
                columns.map(item=>{
                  const key = item[rowKey];
                  if(item.render){
                    return <td key={key}>{item.render(data[item.dataIndex],data)}</td>
                  }
                  return <td key={item.key}>{data[item.dataIndex]}</td>
                })
              }
            </tr>
          })
        }
      </table>
    </div>
  )
}

可以看看效果图

总结

主要难点在于如何处理行与列之间的数据关系。对dataSource循环遍历可以知道需要展示的行数，在此循环里加上对columns的循环遍历可以针对每一行 展示表头（即姓名、年龄、地址）对应的这一列数据。 这一点理解了，以后针对表格数据的处理思路会清晰很多。