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

# 表格（Table）规范

## 表格操作栏

- 操作栏 **必须** 使用：

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

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

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

### 代码演示

```jsx
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 |