ElementUI的table的假分页实现

前言

一般我们的 table 都是会通过真分页来实现数据的展示的，但是有一些情况，我们可能会通过假分页的方式，比如数据量小，为了不增加后端接口的复杂性，前端通过假分页来实现分页。

正文

假分页，其实通过 js 数组的 slice 即可轻松实现，难的是如何响应 ElementUI 中的页码切换、页码大小切换、页面搜索。

通过千方百计的测试，笔者最终选择了一个简单可行的方案，那就是在 table 的 data 绑定里边，调用 js 数组的 slice 方法，以达到实时响应页面交互的效果：

    <el-table
      :data="testData.slice((this.page - 1) * this.size, (this.page - 1) * this.size + this.size)"
      style="width: 100%">

页码切换事件，也是相当简单，修改 data 中代表页码的 page，页大小的 size 即可：

// 修改页大小
      handleSizeChange(val) {
        this.size = val;
      },
// 修改页码
      handleCurrentChange(val) {
        this.page = val;
      }

而搜索和真分页一样操作，不用变：

      queryData() {
        this.queryTestDataByName({
          dataName: this.q
        });
        this.page = 1;
        this.size = 10;
      },

效果图：

全部代码

<template>
  <section>
    <el-row style="margin-top: 15px">
      <el-form :inline="true">
        <el-form-item label="单量名称">
          <el-input placeholder="根据单量名称查询" v-model="q" size="small"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="queryData()">查询</el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" size="small" @click="initKeyList()">初始化列表</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-table
      :data="testData.slice((this.page - 1) * this.size, (this.page - 1) * this.size + this.size)"
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        width="80">
      </el-table-column>
      <el-table-column
        prop="dataKey"
        label="单量编号">
      </el-table-column>
      <el-table-column
        prop="dataName"
        label="单量名称">
      </el-table-column>
      <el-table-column
        prop="updateUser"
        label="更新人	">
      </el-table-column>
      <el-table-column
        prop="updateTime"
        label="更新时间">
      </el-table-column>
      <el-table-column
        prop="yn"
        label="监控开启状态">
        <template slot-scope="scope">
          {{scope.row.yn === 1?'已监控':'未开启'}}
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" v-if="scope.row.yn===0" @click="updateTestDataYn(scope.row)">开启监控
          </el-button>
          <el-button type="danger" size="small" v-if="scope.row.yn===1" @click="updateTestDataYn(scope.row)">解除监控
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.testData.length">
    </el-pagination>

  </section>
</template>

<script>
  import {mapState, mapActions} from 'vuex';

  export default {
    data() {
      return {
        q: "",
        page: 1,
        size: 10
      }
    },
    computed: mapState({
      testData: state => state.test.testData
    }),
    created() {
      this.getTestData();
    },
    mounted() {
    },

    methods: {
      ...mapActions('test', ['getTestData', 'updateTestData', 'queryTestDataByName']),
      updateTestDataYn(row) {
        let that = this;
        this.$confirm('确定修改：' + row.dataName, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log(row);
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
          this.updateTestData(row);
          // 刷新数据，更新监控状态
          this.getTestData();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消修改'
          });
        });
      },
      initKeyList() {
        if (this.testData.length > 0) {
          this.$message('列表不为空，无需重新加载！！！');
        } else {
          this.getTestData();
        }
      },
      queryData() {
        this.queryTestDataByName({
          dataName: this.q
        });
        this.page = 1;
        this.size = 10;
      },
      handleSizeChange(val) {
        this.size = val;
      },
      handleCurrentChange(val) {
        this.page = val;
      }
    },
    watch: {},
  }
</script>

<style scoped>

</style>

结尾

其实我是不怎么支持假分页，因为这样代码拓展性不强，万一数据量大了，就要被迫实现真分页了。
而真分页的后端接口：仅多了 page（页码）、size（页大小）两个参数，返回值加 total（数据总数） 即可，一点儿也不复杂。

本文实属项目不得已而为之。