65 lines
2.2 KiB
Markdown
65 lines
2.2 KiB
Markdown
|
---
|
|||
|
|
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 |
|