首页 > 教程

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

slbcun
2025-04-07
1009 ℃

表格代码 Table.vue

<!--
 * @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

<!--
 * @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>