基于element-ui的 后端分页表格组件

此案例基于 基于element-ui的 动态列分页表格组件（动态控制表格列的显隐），增加了后端分页的功能。

实现思路

  后端分页就是前端传递页码和每页条数两个参数到后台进行查询，返回的数据仅仅包含当前页的数据。（不同于前端分页，一次性查询所有数据）所以，当页码和每页条数变化时，都需要触发后端分页查询的方法，然后再处理分页数据。

后端分页查询方法是在父组件（组件使用者）定义，所以组件需要通过 $emit 来触发该方法。
当前页码、每页条数的信息是封装在组件中的，可以通过 $emit 传递给父组件，所以，父组件的后端分页查询方法需要有两个参数接收。

整体流程：
组件 -> $emit -> 父组件分页查询方法 -> 发送异步请求到后台 -> 分页数据 -> 组件（处理数据，渲染表格）

后端分页查询方法一般为异步请求，$emit 只是触发该请求，可能分页数据还没返回 $emit 就已经执行结束了，那分页数据怎么送到组件处理呢？
两种方式：

1. 将分页数据的处理逻辑以方法参数的形式通过 $emit 传递给父组件，由父组件触发。（此形式）
2. 将分页数据的处理逻辑封装成一个方法，父组件通过 $refs 调用组件该方法。（本案例使用此方式）

组件功能：

1. 继承 动态列分页表格组件 的所有功能
2. 后端分页功能开关
3. 支持后端分页

效果图
和前端分页效果图一致，不贴了，直接到在线演示地址看效果吧。

在线演示地址

https://7wuy1.csb.app/#/backendPaging

组件代码

代码稍长，必要的注释都注明在代码中，文末附使用案例。建议先跑起来使用案例看效果，再深入代码。
代码上传在 前端代码在线编辑器codesandbox 中，可直接查看编辑：此链接

代码就不直接贴了，直接在 codesandbox上看吧。

了解下 codesanbox

使用案例

<template>
  <div>
    <pre>
      后端分页案例：
      1、开启后端分页功能：设置backendPaging为true
      2、设置后端分页查询方法：设置backendPagingFunc事件。（组件会通过 $emit来触发该事件，传递两个参数：当前页码、每页条数）
      3、通过 $refs 调用组件的 callback方法，传递分页信息给组件。（用于组件渲染表格）
    </pre>

    <PageTable
      :backendPaging="true"
      @backendPagingFunc="backendPagingFunc"
      :currentPage="2"
      :pageSizes="[20,5,10]"
      :pageSize="5"
      :paging="true"
      ref="dataTable"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="账号" prop="name"></el-table-column>
      <el-table-column label="名称" prop="nickname"></el-table-column>
      <el-table-column label="邮箱" prop="email"></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">{{ scope.row.state%2===0?'正常':'锁定' }}</template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button size="small" type="text" @click.stop="clickFunc(scope.row)">操作按钮</el-button>
        </template>
      </el-table-column>
    </PageTable>
  </div>
</template>

<script>
import PageTable from "./PageTable.vue";
export default {
  components: {
    PageTable
  },
  data() {
    return {
      tableData: []
    };
  },
  methods: {
    // 后台分页查询方法，由组件通过 $emit触发。参数为当前页码、每页条数、分页数据回调方法
    backendPagingFunc(page, size, callback) {
      var params = {};
      params.size = size;
      params.page = page;

      //模拟发送后台异步请求，延迟3s
      console.log("发送后台请求...", params);
      setTimeout(() => {
        // 模拟后台分页查询数据
        let total = 37, //总条数
          arr = new Array(total).fill("").map((_, i) => {
            i = i + 1;
            return { name: i, nickname: i, email: i, state: i };
          }),
          pageData = arr.slice(
            (params.page - 1) * params.size,
            params.page * params.size
          );
        let result = {
          data: pageData,
          total: total
        };

        console.log("后台请求返回，执行回调", result);
        // 由于是后台分页，所以需要返回当前页数据和总条数信息。约定格式为：{data:[], total:10}
        // callback(result);
        this.$refs.dataTable.callback(result);
      }, 3000);
    },
    clickFunc(row) {
      // console.log(row);
      alert(JSON.stringify(row));
    }
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
</style>

系列文章

• 分页表格组件
• 动态列分页表格组件（动态控制表格列的显隐）
• 后端分页表格组件
• 终极分页表格组件（前/后端分页、动态列）

---

end