import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { Table, Button } from "antd";
function MyComponent() {
const [data, setData] = useState([]);
const [columns] = useState(genColumns());
const columns2 = genColumns();
function genColumns() {
return [
{
title: "Name",
dataIndex: "name",
key: "name"
},
{
title: "Action",
key: "action",
render: (text, record) => (
<Button
type="primary"
onClick={() => {
console.log(record, data);
}}
>
Delete
</Button>
)
}
];
}
// 100ms 获取数据
useEffect(() => {
setTimeout(() => {
setData([
{
key: "1",
name: "张三"
}
]);
}, 100);
}, []);
return (
<div>
<p>表格1---------</p>
<Table
columns={columns}
size="small"
pagination={false}
dataSource={data}
/>
<br />
<p>表格2---------</p>
<Table
columns={columns2}
size="small"
pagination={false}
dataSource={data}
/>
</div>
);
}
ReactDOM.render(<MyComponent />, document.getElementById("container"));
网友评论