YbOutscrollLayout 固定在滚动区域外
左右分布的布局块，让其中一块定位在滚动区域外，不跟随滚动
# 基本使用
固定区域内容
暂无数据
- 8条/页
- 10条/页
- 20条/页
- 30条/页
- 40条/页
- 50条/页
- 100条/页
- 200条/页
- 300条/页
- 400条/页
- 500条/页
无数据
- 1
提示
<template>
<div style="position:relative;height:400px;" class="app-base-bg">
<!-- 以下这个div盒子是滚动条盒子，不能有position -->
<div
style="height:100%;overflow:auto;padding:10px;box-sizing:border-box;"
>
<yb-outscroll-layout fixedWidth="120px" fixedPosition="right">
<div slot="fixed">固定区域内容</div>
<yb-simple-table-page
ref="page"
:searchForm="searchForm"
:table="table"
:pagination="pagination"
:getTableData="getTableData"
storageKey="yb-simple-table-page-fixed"
>
<!-- 表单控件slots "searchForm-"开头的slotName（与searchForm.formItems[].prop拼接） -->
<template
v-slot:searchForm-formItems="{ formModel, formItem }"
>
<el-input
v-model="formModel[formItem.prop]"
clearable
></el-input>
</template>
<!-- 在表单后面追加按钮 -->
<template v-slot:searchForm-other-buttons="">
<el-button type="primary">新增</el-button>
</template>
<!-- 表格列slots "table-"开头的slotName（与table.columns[].prop拼接）-->
<template v-slot:table-action-buttons="{ table }">
<el-button type="default" size="mini">查看</el-button>
<el-button
type="primary"
size="mini"
@click="openDrawer"
>修改</el-button
>
<el-button type="danger" size="mini" @click="openDialog"
>删除</el-button
>
</template>
</yb-simple-table-page>
<el-drawer
:visible.sync="formViewerDrawer"
size="94%"
append-to-body
>
<template v-slot:title>
<span style="margin-left: 10px">蓝蓝</span>
</template>
<div style="margin: 0 20px 20px" ref="formApp"></div>
</el-drawer>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
>
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false"
>取 消</el-button
>
<el-button type="primary" @click="dialogVisible = false"
>确 定</el-button
>
</span>
</el-dialog>
</yb-outscroll-layout>
</div>
</div>
</template>
<script>
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',
defaultValue: '1',
},
{
label: '',
prop: 'other-buttons',
// 不包含在栅格布局中
excludeSpans: true,
// 排放在默认的查询按钮之后
after: true,
},
];
return {
dialogVisible: false,
formViewerDrawer: false,
pagination: {},
searchForm: {
formItems,
spans: { xl: 8, lg: 12 },
},
table: {
'highlight-current-row': true,
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',
visibleForce: true,
},
],
},
};
},
methods: {
getTableData(query) {
return Promise.resolve({
total: tableData.length,
tableData: tableData.slice(
(query.currentPage - 1) * query.pageSize,
query.currentPage * query.pageSize
),
});
},
openDrawer() {
this.formViewerDrawer = true;
},
openDialog() {
this.dialogVisible = true;
},
},
};
</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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
显示 复制 复制
# 固定在右边
固定区域内容
暂无数据
- 8条/页
- 10条/页
- 20条/页
- 30条/页
- 40条/页
- 50条/页
- 100条/页
- 200条/页
- 300条/页
- 400条/页
- 500条/页
无数据
- 1
提示
<template>
<div style="position:relative;height:400px;" class="app-base-bg">
<!-- 以下这个div盒子是滚动条盒子，不能有position -->
<div
style="height:100%;overflow:auto;padding:10px;box-sizing:border-box;"
>
<yb-outscroll-layout fixedWidth="120px" fixedPosition="right">
<div slot="fixed">固定区域内容</div>
<yb-simple-table-page
ref="page"
:searchForm="searchForm"
:table="table"
:pagination="pagination"
:getTableData="getTableData"
storageKey="yb-simple-table-page-fixed"
>
<!-- 表单控件slots "searchForm-"开头的slotName（与searchForm.formItems[].prop拼接） -->
<template
v-slot:searchForm-formItems="{ formModel, formItem }"
>
<el-input
v-model="formModel[formItem.prop]"
clearable
></el-input>
</template>
<!-- 在表单后面追加按钮 -->
<template v-slot:searchForm-other-buttons="">
<el-button type="primary">新增</el-button>
</template>
<!-- 表格列slots "table-"开头的slotName（与table.columns[].prop拼接）-->
<template v-slot:table-action-buttons="{ table }">
<el-button type="default" size="mini">查看</el-button>
<el-button
type="primary"
size="mini"
@click="openDrawer"
>修改</el-button
>
<el-button type="danger" size="mini" @click="openDialog"
>删除</el-button
>
</template>
</yb-simple-table-page>
<el-drawer
:visible.sync="formViewerDrawer"
size="94%"
append-to-body
>
<template v-slot:title>
<span style="margin-left: 10px">蓝蓝</span>
</template>
<div style="margin: 0 20px 20px" ref="formApp"></div>
</el-drawer>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
>
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false"
>取 消</el-button
>
<el-button type="primary" @click="dialogVisible = false"
>确 定</el-button
>
</span>
</el-dialog>
</yb-outscroll-layout>
</div>
</div>
</template>
<script>
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',
defaultValue: '1',
},
{
label: '',
prop: 'other-buttons',
// 不包含在栅格布局中
excludeSpans: true,
// 排放在默认的查询按钮之后
after: true,
},
];
return {
dialogVisible: false,
formViewerDrawer: false,
pagination: {},
searchForm: {
formItems,
spans: { xl: 8, lg: 12 },
},
table: {
'highlight-current-row': true,
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',
visibleForce: true,
},
],
},
};
},
methods: {
getTableData(query) {
return Promise.resolve({
total: tableData.length,
tableData: tableData.slice(
(query.currentPage - 1) * query.pageSize,
query.currentPage * query.pageSize
),
});
},
openDrawer() {
this.formViewerDrawer = true;
},
openDialog() {
this.dialogVisible = true;
},
},
};
</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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
显示 复制 复制
# 左右两边都在可视范围内
使用 allFixed 属性
固定区域内容
右边内容
<template>
<div style="position:relative;height:400px;" class="app-base-bg">
<!-- 以下这个div盒子是滚动条盒子，不能有position -->
<div
style="height:100%;overflow:auto;padding:10px;box-sizing:border-box;"
>
<yb-outscroll-layout
fixedWidth="120px"
fixedPosition="left"
allFixed
>
<div slot="fixed">固定区域内容</div>
<div>右边内容</div>
</yb-outscroll-layout>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {},
};
</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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
显示 复制 复制
# Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| showFixed | 是否显示固定区域块 | boolean | - | true |
| fixedPosition | 固定区域的位置 | string | 'left'|'right' | 'left' |
| fixedWidth | 固定区域的宽度 | string | - | '220px' |
| allFixed | 让左右两边都固定在可视区域，让父元素不出现滚动条 | boolean | - | - |
上次更新: 2024/06/11, 17:45:22