???????基于el-table和el-pagination實現數據的分頁效果

更新時間：2022年08月12日 16:24:36 作者：Developer?小馬

本文主要介紹了???????基于el-table和el-pagination實現數據的分頁效果，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

一、案例效果

（14 條數據每頁顯示 6 條，共 3 頁。）

二、實現步驟&涉及要點

1. el-table 表格存放數據

<el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" stripe
                  style="width: 100%">
          <el-table-column prop="date" label="日期" width="220" align="center"></el-table-column>
          <el-table-column prop="name" label="姓名" width="220" align="center"></el-table-column>
          <el-table-column prop="job" label="職業(yè)" width="220" align="center"></el-table-column>
          <el-table-column prop="address" label="地址" align="center"></el-table-column>
        </el-table>

參數	說明
data	顯示的數據
stripe	是否以斑馬紋顯示
prop	對應列內容的字段名，也可以使用 property 屬性
label	顯示的標題

注意此處在選擇要顯示的數據時也需要對其進行截取操作，否則會直接全部顯示。我們使用的是 slice(start,end) 截取數組，其中不包括 end；

:data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"

每頁數據量 pageSize 為 6， currentPage 為當前頁；比如第一頁，那么截取的就是 0 ~ 6，slice 返回的是數組副本，所以這個 0 ~ 6 代表下標，就有七條數據，去掉下標為 6 的數據，即為 6 條；后面依次...

2. el-pagination 設置分頁效果

<el-pagination
              background
              layout="prev, pager, next,jumper, ->, total, slot"
              :total="tableData.length"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="pageSize"
              style="text-align: center">
      </el-pagination>

參數	說明
background	是否為分頁按鈕添加背景色
layout	組件布局，子組件名用逗號分隔；prev(上一頁按鈕)、pager(頁碼)、nex(下一頁按鈕)、jumper(跳轉)、->(空格)、total(數據總條目數)
current-change	currentPage 改變時會觸發(fā)
current-page	當前頁數
page-sizes	每頁顯示個數選擇器的選項設置

三、完整代碼+詳細注釋

<template>
  <div>
    <div class="paging">
      <!--數據顯示區(qū)域-->
      <div class="data">
        <!--表格存放數組中的數據，并對數據進行截取，以控制每一頁顯示的數據量-->
        <!--slice(start,end) 不包括end-->
        <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" stripe
                  style="width: 100%">
          <el-table-column prop="date" label="日期" width="220" align="center"></el-table-column>
          <el-table-column prop="name" label="姓名" width="220" align="center"></el-table-column>
          <el-table-column prop="job" label="職業(yè)" width="220" align="center"></el-table-column>
          <el-table-column prop="address" label="地址" align="center"></el-table-column>
        </el-table>
      </div>
      <!--分頁按鈕-->
      <el-pagination
              background
              layout="prev, pager, next,jumper, ->, total"
              :total="tableData.length"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="pageSize"
              style="text-align: center">
      </el-pagination>
    </div>
  </div>
</template>
 
<script>
  export default {
    name: "fenye.vue",
    data() {
      return {
        currentPage: '1', //當前頁 刷新后默認顯示第一頁
        pageSize: '6', //每一頁顯示的數據量 此處每頁顯示6條數據
        //假數據
        tableData: [
          {
            date: '2016-05-02',
            name: '橘右京',
            job: '刺客',
            address: '上海市普陀區(qū)金沙江路 1518'
          },
          {
            date: '2016-05-03',
            name: '娜可露露',
            job: '刺客',
            address: '上海市普陀區(qū)金沙江路 1517'
          },
          {
            date: '2016-05-04',
            name: '魯班七號',
            job: '射手',
            address: '上海市普陀區(qū)金沙江路 1519'
          },
          {
            date: '2016-05-05',
            name: '云中君',
            job: '刺客',
            address: '上海市普陀區(qū)金沙江路 1516'
          },
          {
            date: '2016-05-06',
            name: '干將莫邪',
            job: '法師',
            address: '上海市普陀區(qū)金沙江路 1516'
          },
          {
            date: '2016-05-07',
            name: '不知火舞',
            job: '法師',
            address: '上海市普陀區(qū)金沙江路 1516'
          },
          {
            date: '2016-05-08',
            name: '沈夢溪',
            job: '法師',
            address: '上海市普陀區(qū)金沙江路 1516'
          },
          {
            date: '2016-05-09',
            name: '百里守約',
            job: '刺客',
            address: '上海市普陀區(qū)金沙江路 1516'
          },
          {
            date: '2016-05-10',
            name: '馬可波羅',
            job: '射手',
            address: '上海市普陀區(qū)金沙江路 1516'
          },
          {
            date: '2016-05-11',
            name: '孫尚香',
            job: '射手',
            address: '上海市普陀區(qū)金沙江路 1516'
          },
          {
            date: '2016-05-12',
            name: '趙云',
            job: '刺客',
            address: '上海市普陀區(qū)金沙江路 1516'
          },
          {
            date: '2016-05-13',
            name: '鐘無艷',
            job: '戰(zhàn)士',
            address: '上海市普陀區(qū)金沙江路 1516'
          },
          {
            date: '2016-05-14',
            name: '楊玉環(huán)',
            job: '法師',
            address: '上海市普陀區(qū)金沙江路 1516'
          },
          {
            date: '2016-05-15',
            name: '魯班大師',
            job: '輔助',
            address: '上海市普陀區(qū)金沙江路 1516'
          },
        ],
      }
    },
    methods: {
      //點擊按鈕切換頁面
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage; //每次點擊分頁按鈕，當前頁發(fā)生變化
        // console.log(this.currentPage);
      },
    },
    mounted() {
 
    }
  }
</script>
 
<style scoped>
  .paging {
    width: 1000px;
    height: 500px;
    margin: 100px auto;
  }
 
  .data {
    width: 98%;
    height: 340px;
    border: 2px solid #cccccc;
    margin: 10px auto;
    text-align: center;
  }
</style>

到此這篇關于基于el-table和el-pagination實現數據的分頁效果的文章就介紹到這了,更多相關el-table和el-pagination分頁內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: