AntD Table通过数据状态控制行内"删除"状态, 结合三元表达式!
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table, Divider, Tag,Button } from "antd";
const columns = [
{
title: "Name",
dataIndex: "name",
key: "name",
render: text => <a href="javascript:;">{text}</a>
},
{
title: "Age",
dataIndex: "age",
key: "age"
},
{
title: "Address",
dataIndex: "address",
key: "address"
},
{
title: "Tags",
key: "tags",
dataIndex: "tags",
render: tags => (
<span>
{tags.map(tag => (
<Tag color="blue" key={tag}>
{tag}
</Tag>
))}
</span>
)
},
{
title: "Action",
key: "action",
render: (text, record) => (
<span>
<Button type="primary" size="small" >修改</Button>
<Divider type="vertical" />
{record.over === true?
<Button type="danger" size="small" disabled>删除</Button> :
<Button type="danger" size="small" >删除</Button>
}
</span>
)
}
];
const data = [
{
key: "1",
name: "John Brown",
age: 32,
address: "New York No. 1 Lake Park",
tags: ["nice", "developer"],
over: true
},
{
key: "2",
name: "Jim Green",
age: 42,
address: "London No. 1 Lake Park",
tags: ["loser"],
over: true
},
{
key: "3",
name: "Joe Black",
age: 32,
address: "Sidney No. 1 Lake Park",
tags: ["cool", "teacher"],
over: false
}
];
ReactDOM.render(
<Table columns={columns} dataSource={data} />,
document.getElementById("container")
);