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(数据总数) 即可,一点儿也不复杂。

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

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页