今天突然被朋友问的antd table的展开子table的问题,在根据文档操作后发现并没有问题,但是在自己操作过程中想让数据中某行不展示+符号,看了文档并没有这样的属性或者值,网上查了一下也没查到,然后就根据文档在思考了,最后看到了expandIcon 这个属性,
然后就跟句这个属性来进行修改了,主要的方案就是在icon这里判断如果符合不展示的条件,就不展示这个icon就可,其他的icon就正常显示,icon回调的参数里边还给了展开关闭的方法,看来这个就是解决这个问题的方案吧。
主要的操作有下图代码:
最后给出demo代码:
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table, Badge, Menu, Dropdown, Icon } from "antd";
const menu = (
<Menu>
<Menu.Item>Action 1</Menu.Item>
<Menu.Item>Action 2</Menu.Item>
</Menu>
);
function NestedTable() {
const expandedRowRender = () => {
const columns = [
{ title: "Date", dataIndex: "date", key: "date" },
{ title: "Name", dataIndex: "name", key: "name" },
{
title: "Status",
key: "state",
render: () => (
<span>
<Badge status="success" />
Finished
</span>
)
},
{ title: "Upgrade Status", dataIndex: "upgradeNum", key: "upgradeNum" },
{
title: "Action",
dataIndex: "operation",
key: "operation",
render: () => (
<span className="table-operation">
<a>Pause</a>
<a>Stop</a>
<Dropdown overlay={menu}>
<a>
More <Icon type="down" />
</a>
</Dropdown>
</span>
)
}
];
const data = [];
for (let i = 0; i < 3; ++i) {
data.push({
key: i,
date: "2014-12-24 23:12:00",
name: "This is production name",
upgradeNum: "Upgraded: 56"
});
}
return <Table columns={columns} dataSource={data} pagination={false} />;
};
const columns = [
{ title: "Name", dataIndex: "name", key: "name" },
{ title: "Platform", dataIndex: "platform", key: "platform" },
{ title: "Version", dataIndex: "version", key: "version" },
{ title: "Upgraded", dataIndex: "upgradeNum", key: "upgradeNum" },
{ title: "Creator", dataIndex: "creator", key: "creator" },
{ title: "Date", dataIndex: "createdAt", key: "createdAt" },
{ title: "Action", key: "operation", render: () => <a>Publish</a> }
];
const data = [];
for (let i = 0; i < 3; ++i) {
data.push({
key: i,
name: "Screem",
platform: "iOS",
version: "10.3.4.5654",
upgradeNum: 500,
creator: "Jack",
createdAt: "2014-12-24 23:12:00"
});
}
return (
<Table
className="components-table-demo-nested"
columns={columns}
expandedRowRender={expandedRowRender}
expandIcon={(props) => {
// 不需要展示的条件判断
if (props.record.key === 1) {
return "";
}
if (props.expanded) {
return <a onClick={(e) => props.onExpand(props.record, e)}>-</a>;
} else {
return <a onClick={(e) => props.onExpand(props.record, e)}>+</a>;
}
}}
dataSource={data}
/>
);
}
ReactDOM.render(<NestedTable />, document.getElementById("container"));