React antd table组件expandedRowRender属性添加后没有值隐藏展开操作的问题

今天突然被朋友问的antd table的展开子table的问题,在根据文档操作后发现并没有问题,但是在自己操作过程中想让数据中某行不展示+符号,看了文档并没有这样的属性或者值,网上查了一下也没查到,然后就根据文档在思考了,最后看到了expandIcon 这个属性,在这里插入图片描述
然后就跟句这个属性来进行修改了,主要的方案就是在icon这里判断如果符合不展示的条件,就不展示这个icon就可,其他的icon就正常显示,icon回调的参数里边还给了展开关闭的方法,看来这个就是解决这个问题的方案吧。
主要的操作有下图代码:
React antd table组件expandedRowRender属性添加后没有值隐藏展开操作的问题_第1张图片

最后给出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"));

你可能感兴趣的:(React,antd表格组件展开按钮隐藏,table组件展开按钮隐藏,react,antd表格展开)