Yb-components
  • 组件
  • 数据展示
liaoyingmin
2023-02-01

YbSimpleCardPage 分页卡片列表

查询表单、数据卡片、分页器集一体的带分页等查询逻辑的组件

# 基本使用

暂无数据

共 0 条
  • 1
前往
页
<template>
    <div class="app-base-bg" style="padding:10px;">
        <yb-simple-card-page
            ref="page"
            :searchForm="searchForm"
            :table="table"
            :pagination="pagination"
            :getTableData="getTableData"
        >
            <template v-slot:searchForm-formItems="{ formModel, formItem }">
                <el-input
                    v-model="formModel[formItem.prop]"
                    clearable
                ></el-input>
            </template>
        </yb-simple-card-page>
    </div>
</template>
<script>
    const tableData = JSON.parse(
        `[{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY011","patientName":"老李","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY012","patientName":"姓名","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY013","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY014","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY015","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY016","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY017","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY018","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY019","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY020","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY021","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY022","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY023","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY024","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY025","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY026","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY027","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY028","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY029","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY030","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY031","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY032","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY033","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY034","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY035","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY036","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY037","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY038","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY039","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY040","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY041","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY042","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY043","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY044","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY045","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY046","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY047","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY048","patientName":"老王","projectTypeName":"诊疗信息"}]`
    ).map((item, i) => ({ ...item, id: i + 1 }));
    export default {
        data() {
            const formItems = [
                {
                    label: '病案号',
                    prop: 'medicalRecordNumber',
                },
                {
                    label: '姓名',
                    prop: 'patientName',
                    defaultValue: '1',
                },
            ];
            return {
                dialogVisible: false,
                formViewerDrawer: false,
                pagination: {},
                searchForm: {
                    formItems,
                    spans: { xl: 8, lg: 12 },
                },
                table: {
                    'highlight-current-row': true,
                    rowHeight: 200,
                    columns: [
                        {
                            label: '病案号',
                            prop: 'medicalRecordNumber',
                        },
                        {
                            label: '姓名',
                            prop: 'patientName',
                            spans: { span: 12 },
                            'render-label': function (h, { column }) {
                                return (
                                    <span>
                                        <i class="el-icon-s-help"></i>
                                        {column.label}
                                    </span>
                                );
                            },
                        },
                        {
                            label: '信息分类',
                            property: 'projectTypeName',
                            width: '150px',
                            spans: { span: 12 },
                            'label-hidden': true,
                        },
                        {
                            label: '年份',
                            prop: 'fieldName',
                            formatter(row, column, cellValue) {
                                return new Date().getFullYear();
                            },
                            'label-hidden': true,
                        },
                        {
                            label: '字段',
                            prop: 'fieldName',
                            'show-overflow-tooltip': true,
                            'label-hidden': 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
显示 复制

# 插槽的使用

  • 查询表单的插槽名称在 yb-form 的插槽名称加上前缀"searchForm-"，如 "searchForm-formItems"
  • 在默认的查询与重置按钮后追加内容的插槽："searchForm-searchFormButtonsAppended"
  • 卡片的插槽名称在 yb-card-list 的插槽名称加上前缀"table-"，如 "table-medicalRecordNumber"
  • 其他插槽名称："above-table"(在卡片上面的内容)、"above-searchForm"(在查询表单上面的内容)、"default"(默认的插槽，会在卡片和分页的末尾追加)

暂无数据

共 0 条
  • 1
前往
页
<template>
    <div class="app-base-bg" style="padding:10px;">
        <yb-simple-card-page
            ref="page"
            :searchForm="searchForm"
            :table="table"
            :pagination="pagination"
            :getTableData="getTableData"
            @table-select="handleSelection"
        >
            <!-- 表单控件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（与card.columns[].prop拼接）-->
            <template
                v-slot:table-medicalRecordNumber="{ table, page, serialNumber }"
            >
                <span :style="{fontSize: '20px',fontWeight: 'bold'}">
                    <!-- 这个序号可以自定义放在字段值前面-->
                    <el-tag size="mini"> {{serialNumber}} </el-tag>
                    <span :style="{marginLeft:'5px'}">
                        {{table.row.medicalRecordNumber}}
                    </span>
                </span>
            </template>
            <template v-slot:table-buttons="cardData">
                <span>
                    <el-button
                        @click="(e) => openDrawer(e,cardData.row)"
                        type="default"
                        size="mini"
                        >查看</el-button
                    >
                    <el-button type="primary" size="mini" @click="openDialog"
                        >修改</el-button
                    >
                    <el-button type="danger" size="mini">删除</el-button>
                </span>
            </template>

            <!-- 表格上面的slot -->
            <template v-slot:above-table="{ formModel, tableData, page }">
                <el-alert title="在卡片的上面" type="success"> </el-alert>
            </template>
            <!-- 表单上面的slot -->
            <template v-slot:above-searchForm="{ formModel, tableData, page }">
                <el-alert title="在表单的上面" type="warning"> </el-alert>
            </template>
            <!-- 默认的slot -->
            <el-alert title="默认的slot" type="error"> </el-alert>
        </yb-simple-card-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>
    </div>
</template>
<script>
    const tableData = JSON.parse(
        `[{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY011","patientName":"老李","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY012","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,
                    showIndexSerial: false,
                    spans: {
                        sm: 6,
                    },
                    columns: [
                        {
                            label: '病案号',
                            prop: 'medicalRecordNumber',
                            excludeSpans: true,
                            fixed: 'top',
                        },
                        {
                            label: '姓名',
                            prop: 'patientName',
                            spans: { span: 12 },
                            'render-label': function (h, { column }) {
                                return (
                                    <span>
                                        <i class="el-icon-s-help"></i>
                                        {column.label}
                                    </span>
                                );
                            },
                        },
                        {
                            label: '信息分类',
                            property: 'projectTypeName',
                            width: '150px',
                            spans: { span: 12 },
                            'label-hidden': true,
                        },
                        {
                            label: '年份',
                            prop: 'fieldName',
                            formatter(row, column, cellValue) {
                                return new Date().getFullYear();
                            },
                            'label-hidden': true,
                        },
                        {
                            label: '字段',
                            prop: 'fieldName',
                            'show-overflow-tooltip': true,
                            'label-hidden': true,
                        },
                        {
                            label: '操作',
                            prop: 'buttons',
                            align: 'right',
                            excludeSpans: true,
                        },
                    ],
                },
            };
        },
        methods: {
            getTableData(query) {
                return Promise.resolve({
                    total: tableData.length,
                    tableData: tableData.slice(
                        (query.currentPage - 1) * query.pageSize,
                        query.currentPage * query.pageSize
                    ),
                });
            },
            openDrawer(e, row) {
                e.stopPropagation();
                this.formViewerDrawer = true;
            },
            openDialog(e) {
                e.stopPropagation();
                this.dialogVisible = true;
            },
            handleSelection() {
                console.log('handleSelection');
            },
        },
    };
</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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
显示 复制

# 多选

暂无数据

共 0 条
  • 1
前往
页
<template>
    <div class="app-base-bg" style="padding:10px;">
        <yb-simple-card-page
            ref="page"
            :searchForm="searchForm"
            :table="table"
            :pagination="pagination"
            :getTableData="getTableData"
            :selectionTotalTabProps="selectionTotalTabProps"
            @table-select="handleSelection"
            showSelectionTotal
            @pagesSelectionChange="pagesSelectionChange"
        >
            <!-- 表单控件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-searchFormButtonsAppended="{pagesSelection, onClearSelection}"
            >
                <!-- 自定义勾选数的位置 -->
                <el-tag
                    effect="dark"
                    size="default"
                    style="margin:0 10px"
                    type="warning"
                    :closable="pagesSelection.length > 0"
                    @close="onClearSelection"
                    >勾选数：{{pagesSelection.length}}</el-tag
                >
                <el-button type="primary">新增</el-button>
                <el-button type="primary">导入</el-button>
            </template>
            <!-- 在表单后面追加按钮 -->
            <template v-slot:searchForm-other-buttons="">
                <el-button type="primary">新增</el-button>
            </template>

            <!-- 表格列slots "table-"开头的slotName（与card.columns[].prop拼接）-->
            <template
                v-slot:table-medicalRecordNumber="{ table, page, serialNumber }"
            >
                <span :style="{fontSize: '20px',fontWeight: 'bold'}">
                    <!-- 这个序号可以自定义放在字段值前面-->
                    <el-tag size="mini"> {{serialNumber}} </el-tag>
                    <span :style="{marginLeft:'5px'}">
                        {{table.row.medicalRecordNumber}}
                    </span>
                </span>
            </template>
            <template v-slot:table-buttons="cardData">
                <span>
                    <el-button type="default" size="mini">查看</el-button>
                    <el-button type="primary" size="mini">修改</el-button>
                    <el-button type="danger" size="mini">删除</el-button>
                </span>
            </template>
        </yb-simple-card-page>
    </div>
</template>
<script>
    const tableData = JSON.parse(
        `[{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY011","patientName":"老李","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY012","patientName":"姓名","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY013","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY014","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY015","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY016","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY017","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY018","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY019","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY020","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY021","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY022","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY023","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY024","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY025","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY026","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY027","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY028","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY029","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY030","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY031","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY032","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY033","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY034","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY035","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY036","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY037","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY038","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY039","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY040","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY041","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY042","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY043","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY044","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY045","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY046","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY047","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY048","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: {},
                selectionTotalTabProps:{size:'mini'},
                searchForm: {
                    formItems,
                    spans: { xl: 12, lg: 12 },
                },
                table: {
                    'highlight-current-row': true,
                    showIndexSerial: false,
                    spans: {
                        sm: 6,
                    },
                    columns: [
                        {
                            type: 'selection',
                        },
                        {
                            label: '病案号',
                            prop: 'medicalRecordNumber',
                            excludeSpans: true,
                            fixed: 'top',
                        },
                        {
                            label: '姓名',
                            prop: 'patientName',
                            spans: { span: 12 },
                            'render-label': function (h, { column }) {
                                return (
                                    <span>
                                        <i class="el-icon-s-help"></i>
                                        {column.label}
                                    </span>
                                );
                            },
                        },
                        {
                            label: '信息分类',
                            property: 'projectTypeName',
                            width: '150px',
                            spans: { span: 12 },
                            'label-hidden': true,
                        },
                        {
                            label: '年份',
                            prop: 'fieldName',
                            formatter(row, column, cellValue) {
                                return new Date().getFullYear();
                            },
                            'label-hidden': true,
                        },
                        {
                            label: '字段',
                            prop: 'fieldName',
                            'show-overflow-tooltip': true,
                            'label-hidden': true,
                        },
                        {
                            label: '操作',
                            prop: 'buttons',
                            align: 'right',
                            excludeSpans: true,
                        },
                    ],
                },
            };
        },
        methods: {
            getTableData(query) {
                return Promise.resolve({
                    total: tableData.length,
                    tableData: tableData.slice(
                        (query.currentPage - 1) * query.pageSize,
                        query.currentPage * query.pageSize
                    ),
                });
            },
            openDrawer(e, row) {
                e.stopPropagation();
                this.formViewerDrawer = true;
            },
            openDialog(e) {
                e.stopPropagation();
                this.dialogVisible = true;
            },
            handleSelection() {
                console.log('handleSelection');
            },
            pagesSelectionChange(pagesSelection) {
                console.log(pagesSelection);
            },
        },
    };
</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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
显示 复制

# YbSimpleCardPage Attributes

参数 说明 类型 可选值 默认值
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
searchForm.manualRequest 是否需要手动触发首次请求 boolean - false
table 表格的属性，属性包含yb-card-list，需设置 rowHeight 页面可自行计算展示个数 object - {}
table.showIndexSerial 是否显示序号 boolean - true
table.tableStyle 显示内容容器 style object - -
table.tableClass 显示内容容器 className string - -
table.rowHeight 行的高度，必须设置每行的高度才可以自动计算每页的 pageSize，优先级大于 table.cardProps 中根据 body-style 设置的高度 number - -
pagination 分页器的属性，同el-pagination (opens new window)，也可以是 false 就不显示分页 object | false - {}
defaultPageSize 默认每页显示条目个数 number - 默认获取 2 行数据
defaultCurrentPage 默认当前页数 number - 1
getTableData 获取行数据的函数，需 return Promise.resolve({total:总条数,tableData:行数据}) function(query,{fieldSort}){return Promise.resolve({total:0,tableData:[]});} - -
showSelectionTotal 显示勾选数 boolean - -

# YbSimpleCardPage Methods

方法调用方式应该是 this.$refs['page']['methodName']()

方法名称 说明 参数 返回值
getList 获取列表数据，会调用 getTableData 接受一个对象，会转发给 getTableData -
searchList 会让分页器回到第一页，会调用 getList，可以理解为查询触发的方法 接受一个对象，会转发给 getTableData -
resetSearch 重置表单，会调用 searchList，可以理解为重置按钮触发的方法 接受一个对象，会转发给 getTableData -
getYbForm 取得 yb-form 的组件实例 - -
getYbTable 取得 yb-card-list 的组件实例 - -
setFormModel 设置查询表单的 formModel 接受一个对象 -
clearPagesSelection 清空所有的勾选 - -
// 例如
this.$refs['page'].searchList();
1
2

# Page Events

参数 说明 回调参数
pagesSelectionChange 分页勾选数据改变时触发 pagesSelection

事件包含 el-form Events (opens new window)的事件名称加前缀"form-"

<template>
    <yb-simple-card-page ref="page" @form-validate="formValidate">
    </yb-simple-card-page>
</template>
1
2
3
4

事件包含 yb-card-list Events事件名称加前缀"table-"

<template>
    <yb-simple-card-page ref="page" @select="cardSelect"> </yb-simple-card-page>
</template>
1
2
3

事件包含 el-pagination Events (opens new window)事件名称加前缀"pagination-"

<template>
    <yb-simple-card-page
        ref="page"
        @pagination-current-change="paginationCurrentChange"
    >
    </yb-simple-card-page>
</template>
1
2
3
4
5
6
7
上次更新: 2024/09/25, 19:11:24
YbSimpleTablePage 分页查询表格
YbBasicProfile 基础详情数据展示

← YbBasicProfile 基础详情数据展示→

Theme by Vdoing | Copyright © 2021-2025 YB-GZ | MIT License