Table表格组件开发避坑指南与性能调优实战分享

先看效果，再看代码

最近在项目里做了个表格组件，说实话，Table这种东西看起来简单，但要做得灵活又实用，还是得花点心思。我用的是Ant Design的Table组件，亲测有效，基本能满足大部分需求。先上个简单的例子：

import React from 'react';
import { Table } from 'antd';

const dataSource = [
  {
    key: '1',
    name: '张三',
    age: 32,
    address: '北京',
  },
  {
    key: '2',
    name: '李四',
    age: 42,
    address: '上海',
  },
];

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '住址',
    dataIndex: 'address',
    key: 'address',
  },
];

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

export default SimpleTable;

上面这个代码运行起来就是个最基础的表格，没啥特别的。但实际开发中，表格的需求往往复杂得多，下面我会分享几个常见的场景和踩坑经验。

这个场景最好用：动态列和数据

有一次接到一个需求，表格的列是动态的，用户可以选择显示哪些字段，甚至可以调整顺序。听起来好像挺麻烦，但实际上只要把columns做成动态的就行。我当时的实现方式如下：

import React, { useState } from 'react';
import { Table, Checkbox, Button } from 'antd';

const initialColumns = [
  { title: '姓名', dataIndex: 'name', key: 'name' },
  { title: '年龄', dataIndex: 'age', key: 'age' },
  { title: '住址', dataIndex: 'address', key: 'address' },
];

const data = [
  { key: '1', name: '张三', age: 32, address: '北京' },
  { key: '2', name: '李四', age: 42, address: '上海' },
];

const DynamicTable = () => {
  const [columns, setColumns] = useState(initialColumns);

  const toggleColumn = (dataIndex) => {
    const newColumns = columns.filter((col) => col.dataIndex !== dataIndex);
    setColumns(newColumns);
  };

  return (
    <div>
      <div style={{ marginBottom: 16 }}>
        <Button onClick={() => setColumns(initialColumns)}>重置列</Button>
        {initialColumns.map((col) => (
          <Checkbox
            key={col.dataIndex}
            checked={columns.some((c) => c.dataIndex === col.dataIndex)}
            onChange={() => toggleColumn(col.dataIndex)}
          >
            {col.title}
          </Checkbox>
        ))}
      </div>
      <Table dataSource={data} columns={columns} />
    </div>
  );
};

export default DynamicTable;

这个功能其实很简单，就是通过useState控制列的显示状态。点击复选框的时候，过滤掉对应的列。亲测有效，而且用户操作起来也很直观。

踩坑提醒：这三点一定注意

在用Table的过程中，我踩了不少坑，这里总结一下：

• 分页问题：如果你的数据是从后端接口获取的，记得设置pagination属性为false，然后自己处理分页逻辑。否则Table会默认认为所有数据都在前端，导致性能问题。
• 列宽自适应：如果表格宽度固定，而列的内容太多，可能会出现内容被截断的情况。建议给列加上ellipsis: true，这样内容超出时会自动省略并显示省略号。
• 排序和筛选的回调问题：如果你需要对数据进行排序或筛选，一定要注意回调函数的参数。onChange方法的第一个参数是分页信息，第二个参数是过滤条件，第三个参数是排序信息。我之前就因为搞错了参数顺序，折腾了半天才发现。

顺便提一句，关于分页的问题，我的建议是直接让后端返回分页后的数据，而不是一次性把所有数据都拉到前端再分页。这样不仅性能好，而且用户体验也会更好。

高级技巧：自定义单元格渲染

有时候我们需要在表格中显示一些特殊的内容，比如按钮、标签或者图片。这时候就需要用到render方法了。举个例子，假设我们要在表格里显示操作按钮：

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '操作',
    key: 'action',
    render: (_, record) => (
      <span>
        <a onClick={() => handleEdit(record)}>编辑</a>
        <a style={{ marginLeft: 8 }} onClick={() => handleDelete(record)}>
          删除
        </a>
      </span>
    ),
  },
];

这里的render方法非常灵活，你可以根据每一行的数据动态生成内容。我经常用它来做一些复杂的交互，比如弹出对话框或者跳转页面。亲测有效，强烈推荐。

拓展思路：表格的更多可能性

表格还有很多高级用法，比如拖拽排序、树形结构、合并单元格等等。这些功能虽然不常用，但在特定场景下确实能提升用户体验。比如拖拽排序可以用react-dnd来实现，树形结构可以直接用Ant Design的treeData属性。

这次分享的内容主要是我在实际项目中的使用经验，希望能帮到大家。以上是我踩坑后的总结，希望对你有帮助。这个技术的拓展用法还有很多，后续会继续分享这类博客。