提供分页查询的调用逻辑，YbSimpleTablePage 组件就是依赖此 mixin

需独立引入

import pageList_mixin from 'yb-components/packages/es/mixins/pageList_mixin';

基本使用

需要在组件内引入 pageList_mixin

需要提供 getListApi 方法，必需返回 Promise，resolve({total,tableData})

<template>
    <div v-loading="pageLoading">
        <yb-form
            ref="form"
            :formItems="formItems"
            :model="formModel"
            :inline="true"
            style="width: 100%"
            @submit.native.prevent="searchList"
        >
            <template v-slot:formItems="formItem">
                <el-input
                    v-model="formModel[formItem.prop]"
                    clearable
                ></el-input>
            </template>
            <template v-slot:search-buttons>
                <el-button type="primary" native-type="submit" size="small"
                    >查询</el-button
                >
            </template>
        </yb-form>
        <el-card
            :body-style="{ padding: '0' }"
            style="border: 0"
            shadow="never"
        >
            <yb-table :columns="columns" :data="tableData">
                <template v-slot:state="{ column, row }">
                    <el-tag
                        :type="tagTypes[row[column.property]]"
                        effect="plain"
                        >{{ row[column.property] }}</el-tag
                    >
                </template>
                <template v-slot:action-buttons="{ row }">
                    <el-button type="default" size="mini">查看</el-button>
                </template>
            </yb-table>
        </el-card>
        <div style="margin-top: 10px; overflow: hidden">
            <el-pagination
                background
                layout="total,prev, pager, next"
                :total="page.total"
                :page-size="page.pageSize"
                :current-page="page.currentPage"
                style="float: right"
                @size-change="onPageSizeChange"
                @current-change="onCurrentPageChange"
            >
            </el-pagination>
        </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 }));

    import pageListMixin from './pageListMixin';

    export default {
        mixins: [pageListMixin],
        data() {
            const formItems = [
                {
                    label: '病案号',
                    prop: 'medicalRecordNumber',
                },
                {
                    label: '姓名',
                    prop: 'patientName',
                },
                {
                    label: '',
                    prop: 'search-buttons',
                },
            ];
            const formModel = formItems.reduce((tol, item) => {
                return { ...tol, [item.prop]: '' };
            }, {});
            return {
                formItems,
                formModel,
                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: '146px',
                    },
                ],
            };
        },
        mounted() {
            this.searchList();
        },
        methods: {
            // 调用 this.searchLis() 会调用 getListApi
            getListApi(query) {
                return Promise.resolve({
                    total: tableData.length,
                    tableData: tableData.slice(
                        (query.currentPage - 1) * query.pageSize,
                        query.currentPage * query.pageSize
                    ),
                });
            },
        },
    };
</script>

data

参数	说明	类型	可选值	默认值
pageLoading	调用 searchList 或 getList 会触发 pageLoading	boolean	-	false
page	分页的信息对象	object	-	-
page.pageSize	一页显示条数	number	-	10
page.currentPage	当前页数	number	-	1
page.total	总数	number	-	0
tableData	由 getListApi 方法 resolve 回来的列表数据	object[]	-	[]
formModel	通常用于绑定查询表单的值，用于 getListApi 方法的参数	object	-	{}

methods

方法名	说明	返回值	传参
getList	获取列表数据，会调用 getListApi 方法	接受一个对象，会转发给 getListApi	-
searchList	会让分页器回到第一页，会调用 getList，可以理解为查询触发的方法	接受一个对象，会转发给 getListApi	-
searchList	会让分页器回到第一页，会调用 getList，可以理解为查询触发的方法	接受一个对象，会转发给 getListApi	-
onCurrentPageChange	当分页器的当前页改变时需调用	-	currentPage
onPageSizeChange	当分页器的一页条数改变时需调用	-	pageSize