vue 前端分頁（el-pagination）展示數據

文章來源：https://www.cnblogs.com/fengpingfan/p/9811330.html

在web開發過程中，通常使用表格展示數據，在數據較多時采用分頁的方式展示給用戶。

分頁方式有前端假分頁和后端分頁兩種實現方式，此文僅記錄前端假分頁實現方式。

 

第一步：添加分頁組件（el-pagination）在表格下方，添加的代碼如下所示：

<template>
    <el-table>
    ...
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[15, 30, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="currentTotal">
    </el-pagination>
</template>

<script>
    ...
</script>

第二步：添加分頁所需的變量，如下所示：

<script>
  export default {
    methods: {
      ...
    },
    data() {
      return {
        currentPage: 1,
        pageSize: 30,
        currentTotal: 0,
        
        tableData: []
      }
    }
  }
</script>

第三步：添加相應的分頁方法，如下所示：

<script>
  export default {
    methods: {
      handleSizeChange(val) {
        this.pageSize = val;
        console.log(`每頁 ${val} 條`);
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        console.log(`當前頁: ${val}`);
      }
    },
    data() {
      return {
        currentPage: 1,
        pageSize: 30,
        currentTotal: 0,
        
        tableData: []
      }
    }
  }
</script>

第四步：修改查詢按鈕邏輯，在成功查詢后，更新數據的總數量。代碼如下所示：

<script>
  import {ServFindAllByConditions} from '@/service/database'
  export default {
    methods: {
      handleBtnQuery(query) {
        if (query.env === "") {
          this.$message({
            message: '請選擇查詢環境',
            type: 'warning'
          });
          return;
        }
        
        ServFindAllByConditions(query).then(res => {
          this.tableData = res.data;
          this.currentTotal = this.tableData.length;
          this.$message({
            message: res.msg,
            type: res.code == 200 ? 'success' : 'warning'
          });
        })
        .catch(err => {
          console.log(err)
        })
      },
      handleSizeChange(val) {
        this.pageSize = val;
        console.log(`每頁 ${val} 條`);
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        console.log(`當前頁: ${val}`);
      }
    },
    data() {
      return {
        currentPage: 1,
        pageSize: 30,
        currentTotal: 0,
        
        tableData: []
      }
    }
  }
</script>

第五步：使用slice實現前端的假分頁，最終vue文件中的主要代碼如下所示：

<template>
  <d2-container>
    <el-form :model="query" :inline="true">
      <el-form-item label="英文簡稱：">
        <el-input v-model="query.eng" placeholder="請輸入英文簡稱..." clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleBtnQuery(query)" type="primary" icon="el-icon-search">搜索</el-button>
      </el-form-item>
    </el-form>
    
    <el-table
      :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
      hight="250"
      border
      stripe
      max-height="650"
      style="width: 100%">
      <el-table-column fixed type="index" width="50"></el-table-column>
      <!--<el-table-column prop="id" label="系統主鍵" width="100"></el-table-column>-->
      ...
      ...
      <el-table-column label="訪問鏈接" width="400" show-overflow-tooltip>
        <template slot-scope="scope">
          <a :href="scope.row.url" target="_blank" class="buttonText">{{scope.row.url}}</a>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[15, 30, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="currentTotal">
    </el-pagination>
</template>

<script>
  import {ServFindAllByConditions} from '@/service/database'
  export default {
    methods: {
      handleBtnQuery(query) {
        if (query.env === "") {
          this.$message({
            message: '請選擇查詢環境',
            type: 'warning'
          });
          return;
        }
        
        ServFindAllByConditions(query).then(res => {
          this.tableData = res.data;
          this.currentTotal = this.tableData.length;
          this.$message({
            message: res.msg,
            type: res.code == 200 ? 'success' : 'warning'
          });
        })
        .catch(err => {
          console.log(err)
        })
      },
      handleSizeChange(val) {
        this.pageSize = val;
        console.log(`每頁 ${val} 條`);
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        console.log(`當前頁: ${val}`);
      }
    },
    data() {
      return {
        currentPage: 1,
        pageSize: 30,
        currentTotal: 0,
        
        tableData: []
      }
    }
  }
</script>

最終效果如下所示：