YbSimpleTablePage 分页查询表格
查询表单、数据表格、分页器集一体的带分页等查询逻辑的组件
# 基本使用
表格默认只展示前面的 6 列，启用 storageKey 后可以配置【表格展示列】【是否开启纵向边框】，目的是希望在界面展示设计上尽量不出现横向滚动条。
设置 storageKey 后，表格配置内容均保存至 localStorage，页面刷新会自动读取缓存配置。 当 columns[].visible，设置为 true 时，该字段会默认展示，若设置字段超出 6 个，则后面字段设置无效，可通过表格配置弹窗修改展示状态 当 columns[].visibleForce ，设置为 true 时，该字段会一直默认展示，且无法改变字段展示状态
暂无数据
- 1
复制
# 调整 formItems 布局
暂无数据
- 1
复制
# 显示勾选数
支持分页勾选，可以自定义勾选数的位置
暂无数据
- 1
复制
# 自定义表格配置事件
当不设置 storageKey ，可以设置 showColumnsConfig 为 true，启用表格配置
暂无数据
- 1
复制
# 插槽的使用
- 查询表单的插槽名称在 yb-form 的插槽名称加上前缀"searchForm-"，如 "searchForm-formItems"
- 在默认的查询与重置按钮后追加内容的插槽："searchForm-searchFormButtonsAppended"
- 表格的插槽名称在 yb-table 的插槽名称加上前缀"table-"，如 "table-columnCells"
- 表格的插槽名称在 yb-pagination 的插槽名称加上前缀"pagination-"，如 "pagination-afterReload"
- 其他插槽名称："above-table"(在表格上面的内容)、"above-searchForm"(在查询表单上面的内容)、"default"(默认的插槽，会在表格和分页的末尾追加)
在表单的上面
在表格的上面
暂无数据
- 1
默认的slot
复制
- 自定义表格位置内容的插槽名称："center-content", 可以选择将表格摆放到其他位置，这是个特殊的插槽，必须在 render 函数中使用，而不能在 template
左边内容
暂无数据
- 1
复制
也可以使用 jsx
<script lang="jsx">
const tableData = JSON.parse(
`[{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老李","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"姓名","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老王","projectTypeName":"诊疗信息"}]`
).map((item, i) => ({ ...item, id: i + 1 }));
export default {
data() {
const formItems = [
{
label: '病案号',
prop: 'medicalRecordNumber',
},
{
label: '姓名',
prop: 'patientName',
},
];
return {
inputValue: null,
pagination: {},
searchForm: {
formItems,
inline: true,
},
table: {
columns: [
{
label: '病案号',
prop: 'medicalRecordNumber',
'show-overflow-tooltip': true,
width: '120px',
},
{
label: '姓名',
prop: 'patientName',
},
{
label: '信息分类',
prop: 'projectTypeName',
'show-overflow-tooltip': true,
},
{
label: '操作',
prop: 'action-buttons',
width: '220px',
},
],
},
};
},
render(h) {
return (
<div class="app-base-bg" style={{ padding: '10px' }}>
<yb-simple-table-page
ref="page"
props={{
searchForm: this.searchForm,
table: this.table,
pagination: this.pagination,
getTableData: this.getTableData,
defaultPageSize: 3,
}}
scopedSlots={{
'searchForm-formItems': ({
formModel,
formItem,
}) => {
return (
<el-input
v-model={formModel[formItem.prop]}
/>
);
},
'center-content': ({
formModel,
tableData,
page,
tableNode,
paginationNode,
}) => {
<el-row>
<el-col span={8}>左边内容</el-col>
<el-col span={16}>
{tableNode}
{paginationNode}
</el-col>
</el-row>;
},
}}
/>
</div>
);
},
methods: {
getTableData(query) {
return Promise.resolve({
total: tableData.length,
tableData: tableData.slice(
(query.currentPage - 1) * query.pageSize,
query.currentPage * query.pageSize
),
});
},
},
};
</script>
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
# Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| searchForm | 查询表单的属性，同yb-form，也可以是 false 就不显示表单 | object | false | - | {} |
| searchForm.formItems | 查询表单项的配置，同yb-form 的 formItems | object[] | - | [] |
| searchForm.formItems[].after | 是否排放在默认的查询按钮之后 | boolean | - | false |
| searchForm.formItems[].defaultValue | 当前控件的默认值 | - | - | - |
| searchForm.showDefaultButtons | 是否显示默认的查询、重置按钮 , 此项 formItem 对应的 prop 属性值是 "searchFormButtons" ，可以在 formItems 添加{prop:"searchFormButtons",excludeSpans:false} 覆盖此项的默认属性 | boolean | - | true |
| storageKey | 浏览器存储 localStorage 的 key，启用后会在表格的右上角出现一个小图标，点击后打开可以配置【表格展示列】【是否开启纵向边框】，页面刷新会自动读取缓存配置，请确保所有 YbSimpleTablePage 组件是具有唯一的 key | string | - | - |
| table | 表格的属性，属性包含yb-table | object | - | {} |
| table.border | 是否开启纵向边框，启用 storageKey 可控制 | boolean | - | - |
| table.columns | 表格列配置，属性包含yb-table 的 columns ，默认只展示前面 table.defaultVisibleColumnLength 个，其余启用 storageKey 可控制 | array[] | - | [] |
| table.defaultVisibleColumnLength | 默认只展示 table.columns 的个数，控制表格尽量不出现横向滚动条 | number | - | 6 |
| table.columns[].visibleForce | 启用 storageKey 后，列字段会进入可选择展示操作，可以启用 visibleForce 来强制此字段一直保持展示，且不能改变展示状态 | boolean | - | false |
| table.columns[].visible | 启用 storageKey 后，列字段会进入可选择展示操作，可以使用 visible 来控制此字段是否默认展示，并且字段可在表格配置弹窗改变展示状态。当 visible 为 true 的字段个数超出 table.defaultVisibleColumnLength 时，设置默认展示无效，可通过表格配置弹窗修改展示状态 | boolean | - | false |
| table.showIndexSerial | 是否显示默认的序号列 ，序号列的 prop 属性值是 "tableIndexSerial", 可以对应此属性值添加一列来覆盖序号列的默认属性，比如序号列的宽度默认是"58px",在 columns 中添加 {prop:"tableIndexSerial",width:"40px"} | boolean | - | true |
| pagination | 分页器的属性，同el-pagination (opens new window)，也可以是 false 就不显示分页 | object | false | - | {} |
| defaultPageSize | 默认每页显示条目个数 | number | - | 10 |
| defaultCurrentPage | 默认当前页数 | number | - | 1 |
| resetPageWhenColumnsChanged | 当 table.columns 变化时是否将分页重置到初始 | boolean | - | true |
| getTableData | 获取表格行数据的函数，需 return Promise.resolve({total:总条数,tableData:行数据}) | function(query,{fieldSort}){return Promise.resolve({total:0,tableData:[]});} | - | - |
| showSelectionTotal | 显示勾选数 | boolean | - | - |
| aboveTableWrapperClass | above-table 插槽的包裹元素的 className | string|object|array | - | - |
| selectionTotalTabProps | 显示勾选数的 el-tag 组件的 props | Object | - | - |
| isAffixPagination | 分页器是否浮动 | boolean | - | false |
| isDefaultQueryData | 是否默认查询数据 | boolean | - | true |
| showColumnsConfig | 是否启用表格配置，在未设置 storageKey 的情况下，可设置该属性显示表格配置，需配合事件 resetConfig、submitConfig 使用 | boolean | - | false |
| dialogConfig | 用于设置表格配置弹窗页面的 dialog 属性，支持 el-dialog 属性 | object | - | {} |
| dialogConfig.cancelButtonText | 表格配置弹窗取消按钮文本 | string | - | '取消' |
| dialogConfig.resetButtonText | 表格配置弹窗恢复默认配置按钮文本 | string | - | '恢复默认配置' |
| dialogConfig.submitButtonText | 表格配置弹窗确定按钮文本 | string | - | '确定' |
# Page Methods
方法调用方式应该是 this.$refs['page']['methodName']()
| 方法名称 | 说明 | 参数 | 返回值 |
|---|---|---|---|
| getList | 获取列表数据，会调用 getTableData | 接受一个对象，会转发给 getTableData | - |
| searchList | 会让分页器回到第一页，会调用 getList，可以理解为查询触发的方法 | 接受一个对象，会转发给 getTableData | - |
| resetSearch | 重置表单，会调用 searchList，可以理解为重置按钮触发的方法 | 接受一个对象，会转发给 getTableData | - |
| getYbForm | 取得 yb-form 的组件实例 | - | - |
| getYbTable | 取得 yb-table 的组件实例 | - | - |
| setFormModel | 设置查询表单的 formModel | 接受一个对象 | - |
| clearPagesSelection | 清空所有的勾选 | - | - |
| setPagesSelection | 设置勾选项，用于返显勾选需求 ，参数 pagesSelection： 要勾选的行数据 | pagesSelection | - |
// 例如
this.$refs['page'].searchList();
1
2
2
# Page Events
| 参数 | 说明 | 回调参数 |
|---|---|---|
| pagesSelectionChange | 分页勾选数据改变时触发 | pagesSelection |
| resetConfig | 表格配置弹窗恢复默认配置事件 | ((config)=>void) 接收一个函数，设置表格默认信息 |
| submitConfig | 表格配置弹窗确定事件 | (config, isChange, done) 接收三个参数，1. 表格配置信息 2. boolean 类型的参数，是否改变了配置后点击确定按钮 3.回调函数，用于关闭弹窗 |
事件包含 el-form Events (opens new window)的事件名称加前缀"form-"
<template>
<yb-simple-table-page ref="page" @form-validate="formValidate">
</yb-simple-table-page>
</template>
1
2
3
4
2
3
4
事件包含 el-table Events (opens new window)事件名称加前缀"table-"
<template>
<yb-simple-table-page ref="page" @table-current-change="tableCurrentChange">
</yb-simple-table-page>
</template>
1
2
3
4
2
3
4
事件包含 el-pagination Events (opens new window)事件名称加前缀"pagination-"
<template>
<yb-simple-table-page
ref="page"
@pagination-current-change="paginationCurrentChange"
>
</yb-simple-table-page>
</template>
1
2
3
4
5
6
7
2
3
4
5
6
7
上次更新: 2024/12/13, 19:45:26