fx-platform-uiAppearance
表格 table
基本使用
终端后台管理-案例(点击查看该table样式表)
API
table
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| -- | 所有ant design table的props | -- | -- |
| searchShow | 是否显示搜索菜单 | Boolean | true |
| tableShow | 是否显示table(搜索条件不影响) | Boolean | true |
| formProps | fx-platform-ui form属性 | Object | -- |
| columns | 表格配置 | Object | -- |
| dataRequest | 表格数据请求函数 注意：数据格式 | (params, onChangeParams) => Promise | -- |
| showIndex | 是否显示索引号 | Boolean | false |
| updatePageVnode | 操作分页dom(一般不会使用) | Function | -- |
columns
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 标题 | string | -- |
| dataIndex | 数据字段 | string ｜ '$action' | -- |
| width | 宽度 | number | -- |
| searchField | 指定搜索的字段 | string | -- |
| bodyCell | 个性化单元格 | VNode | string | -- |
| headerCell | 个性化头部单元格 | VNode | string | -- |
| hideInSearch | 在查询表单中是否隐藏此项 | boolean | false |
| hideInTable | 在 Table 中是否隐藏此列 | boolean | false |
| actions | 操作列 | Array | -- |
actions
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| onClick | 点击事件 | Function | -- |
| label | 操作按钮名称 | string | -- |
| color | 操作按钮主题颜色 | 'success' | 'error' | 'warning' | -- |
| icon | 按钮icon | string | -- |
| disabled | 按钮禁用 | boolean | false |
| divider | 分割线 | boolean | false |
| ifShow | 是否显示 | boolean | true |
| componentType | 组件类型(不填，默认'button',如果操作项是文字，可设置为'span') | string | button |
table-data
js
/** 根据科室要求规范，table返回数据类型字段、分页 要求按照如下格式：
* currentPage 页码
* pageSize 每页显示条数
* totalSize 总共条数
*
*/
const callbackData = {
"currentPage": 1,
"pageSize": 5,
"totalSize": 45,
"list": [
{
"name": "a",
"description": "test1",
"tag": "demo-a"
},
{
"name": "b",
"description": "test1",
"tag": "demo-b"
},
{
"name": "c",
"description": "test1",
"tag": "demo-c"
},
{
"name": "d",
"description": "test1",
"tag": "demo-d"
},
{
"name": "e",
"description": "test1",
"tag": "demo-e"
}
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
事件
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| change | 分页、排序、筛选变化时触发 | Function(pagination, filters, sorter, { currentDataSource }) |
ref内部事件（使用通过ref获取内部事件）
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| reload | 主要用来重新请求（请求参数保持不变，多用于'删除'、'修改'等操作） | Function(resetPageIndex = false)（resetPageIndex为true时默认从第一页开始查询） |
| handleSubmit | 表格查询事件 | Function(params, page = 1) |
| getQueryFormRef | 当外部需要动态改变搜索表单的值或选项时，需要调用此方法获取'查询表单'实例 | -- |
| setProps | 动态改变表单配置(可以用来做动态显示或隐藏) | -- |