記錄Antd Table組件寫法父表Row增加、刪除或其他操作子表單獨(dú)刷新

平常我們的做表格都有展開子表，那么我們要在父元素操作子元素比如刪除、增加和刷新，這種情況我們需要做如下寫法：

image.png

import { Table, Row, Space, Button, Spin } from "antd";
import Mock from "mockjs";
import { useState, memo, useEffect } from "react";

//子元素
const RefreshChildRow = memo((props) => {
  const { id, refreshId, resetRefresh } = props;
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (refreshId === id) {
      setLoading(true);
      setTimeout(() => {
        setLoading(false);
        resetRefresh(null);
      }, 1000);
    }
  }, [refreshId, id, resetRefresh]);

  return (
    <Spin spinning={loading}>
      <Row>{props.name}</Row>
    </Spin>
  );
});

const Random = Mock.Random;

const data = new Array(10).fill("").map(() => ({
  name: Random.name(),
  id: Mock.mock("@increment"),
  title: Random.title(),
  child: [
    {
      name: Random.name(),
      id: Mock.mock("@increment"),
      title: Random.title()
    }
  ]
}));

const CustomTable = (props) => {
  const [refreshId, setRefreshId] = useState(null);
  const handleAdd = (row) => {
    setRefreshId(row.id);
  };
  const columns = [
    {
      dataIndex: "name",
      title: "name"
    },
    {
      dataIndex: "id",
      title: "id"
    },
    {
      dataIndex: "title",
      title: "title"
    },
    {
      title: "操作",
      render(row) {
        return (
          <Space>
            <Button onClick={() => handleAdd(row)}>添加</Button>
          </Space>
        );
      }
    }
  ];
  return (
    <Table
      columns={columns}
      rowKey={"id"}
      pagination={false}
      size="small"
      dataSource={data}
      expandable={{
        expandedRowRender: (record) => (
          <RefreshChildRow
            {...record}
            refreshId={refreshId}
            resetRefresh={setRefreshId}
          />
        )
      }}
    />
  );
};

export default memo(CustomTable);