safety-eval-service-frontend/.cursor/skills/specs/07-表格规范/02-表格操作栏/SKILL.md

name	description
jjb-table-action	定义 JJB 项目表格操作栏规范。在使用 TableAction、操作列或 jjb-react-admin-component 时使用。必须参考 MD/d.ts 文档，操作栏固定在右侧。

表格（Table）规范

表格操作栏

• 操作栏 必须 使用：

  @cqsjjb/jjb-react-admin-component/TableAction

  必须严格参考node_modules中对应依赖包的 MD 文档或 d.ts 文件！不得猜测组件属性！

• 操作栏固定在 右侧：列配置中必须设置 fixed: "right"

代码演示

import { useState } from 'react';
import { Button, Table } from 'antd';
import TableAction from '@cqsjjb/jjb-react-admin-component/TableAction';

function App() {
  const [ open, setOpen ] = useState(false);
  return (
    <>
      <Button onClick={() => setOpen(true)}>打开地图</Button>
      <Table
        columns={[
          {
            title: 'ID',
            dataIndex: 'id'
          },
          {
            title: '操作',
            fixed: 'right',
            render: () => (
              <TableAction>
                <a>编辑</a>
                <a>删除</a>
                <a>详情</a>
                {/* 多余部分自动收入下拉菜单 */}
                <a>复制</a>
              </TableAction>
            )
          }
        ]}
      />
    </>
  )
}

API

属性	说明	类型	默认值
icon	图标	React.Node	MoreOutlined
maximum	最大显示数量，超出的会放入下拉菜单	number	3
space	按钮之间的间距	number	8
placement	下拉菜单显示位置，参考 https://ant-design.antgroup.com/components/tooltip-cn#api	string	bottomRight
trigger	下拉触发方式，参考 https://ant-design.antgroup.com/components/tooltip-cn#api	string	hover