ActionButton操作列

EditAction 编辑列

import { Divider, Popconfirm, message  } from 'antd';
import { Link } from 'react-rotuer-dom';
function ActionGroup({value, onDelete, onUpdate}) {
  const { id } = value;
  return (
    <>
      <a href={null} onClick={() => onUpdate(id)} rel="noopener noreferrer">
        编辑
      </a>
      <Divider type="vertical" />
      <Popconfirm
        title="删除后数据将无法恢复，请谨慎操作！"
        overlayStyle={{ width: 220 }}
        onConfirm={() => onDelete(id)}
      >
        <a href={null}>删除</a>
      </Popconfirm>
      <Divider type="vertical" />
      <Link to={`/detail/${id}`}>详情</Link>
    </>
  );
}
export default ActionGroup

MoreAction 下拉列

下拉参考 ProTable
https://procomponents.ant.design/components/table?current=1&pageSize=5

MoreAction.jsx

import { memo } from 'react';
import { array } from 'prop-types';
import { Menu, Dropdown } from 'antd';
import { EllipsisOutlined } from '@ant-design/icons';
import equal from 'fast-deep-equal';
const { Item } = Menu;
MoreAction.propTypes = {
  data: array.isRequired,
};
function MoreAction({ data }) {
  const listData = data.filter(it => !it.more);
  const menuData = data.filter(it => it.more);
  const menu = (
    <Menu>
      {menuData.map((it, i) => <Item key={i}>{it}</Item>)}
    </Menu>
  );
  return (
    <>
      {listData}
      <Dropdown overlay={menu} className="ml8">
        <a rel="noopener noreferrer">
          <EllipsisOutlined />
        </a>
      </Dropdown>
    </>
  );
}
function propsEqual({ data }, props) {
  return equal(data, props.data);
}
export default memo(MoreAction, propsEqual);

columns

const columns = [
  {
    title: '应用名称',
    dataIndex: 'name',
  },
  {
    title: '容器数量',
    dataIndex: 'total',
    align: 'right',
    sorter: (a, b) => a.total - b.total,
  },
  {
    title: '操作',
    key: 'option',
    width: 120,
    valueType: 'option',
    render: renderAction,
  },
];
function renderAction(_, {id, name}) {
  const actionData  = [
    <Link key="link" to={`/edit/${id}`}>编辑</Link>,
    <a key="warn">报警</a>,
    <Popconfirm
      key="copy"
      title={`确定要拷贝 ${name}`}
      onConfirm={() => onCopy(id)}
    >
      <a rel="noopener noreferrer">拷贝</a>
    </Popconfirm>,
    <Popconfirm
      key="delete"
      title={`确定要删除 ${name}`}
      onConfirm={() => onDelete(id)}
    >
      <a rel="noopener noreferrer">删除</a>
    </Popconfirm>,
  ];
  return <MoreAction dataSource={actionData} />
}
function onDelete(id) {}
function onCopy(id) {}