Vue项目Element-UI表格el-table的分页el-pagination功能简单封装

自用笔记

表格代码 Table.vue

代码语言：javascript复制

<!--
 * @Author: Han
 * @Date: 2022-01-13 14:00:49
 * @LastEditors: Han
 * @LastEditTime: 2022-01-14 14:22:15
-->
<template>
    <section class="content">
        <div class="theTable">
            <el-table :data="tableData" border :header-cell-style="{background:'#f5f7fa'}">
                <el-table-column type="index" label="序号" header-align="center" align="center" width="50">
                </el-table-column>
                <el-table-column prop="userId" label="用户ID" header-align="center" align="center" width="146">
                </el-table-column>
                <el-table-column prop="userName" label="姓名" header-align="center" align="center">
                </el-table-column>
                <el-table-column prop="mobile" label="用户账号" header-align="center" align="center" width="146">
                </el-table-column>
                <el-table-column label="用户类别" header-align="center" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.userType=='TEACHER'?'教师':'学生'}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="schoolName" label="学校名称" header-align="center" align="center">
                </el-table-column>
                <el-table-column label="操作" header-align="center">
                    <template slot-scope="scope">
                        <div class="caozuo">
                            <span @click="setDIALOG(true,scope.row)">{{scope.row.status=='DISABLED' ?'启用':'禁用'}}</span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <Paging :pageData="pageData" @pageSizeChan="pageSizeChan" />
    </section>
</template>

<script>
    export default {
        components: {
            Paging: () => import('@/components/Paging')
        },
        data() {
            return {
                tableData: [],
                pageData: {
                    thepageSize: 10,
                    pageIndex: 1,
                    dataTotal: 0
                }
            }
        },
        methods: {
            // 分页功能
            pageSizeChan(pg) {
                this.pageData.pageIndex = pg
                this.数据请求函数()
            },
        }
    }
</script>

分页组件代码 Paging.vue

代码语言：javascript复制

<!--
 * @Author: Han
 * @Date: 2022-01-13 14:24:52
 * @LastEditors: Han
 * @LastEditTime: 2022-01-13 14:25:17
-->
<template>
  <div class="thePage" v-if="pageData.dataTotal > 0">
    <span>第{{pageData.pageIndex}}页/{{pageData.dataTotal}}条数据</span>
    <el-pagination background @current-change="pageChange" :page-size="pageData.thepageSize"
      :current-page="pageData.pageIndex" layout="prev, pager, next, jumper" :total="pageData.dataTotal">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    props: {
      pageData: {
        type: Object,
        default: null
      }
    },
    methods: {
      // 换页功能
      pageChange(nowPage) {
        this.$emit('pageSizeChan', nowPage)
      }
    }
  }

</script>

<style>
  .thePage {
    display: flex;
    align-items: center;
    float: right;
    padding: 24px 0 24px;
    font-size: 14px;
  }

</style>

paging table 表格 分页

0 人点赞