在vue項目中使用Element-ui制作一個分頁效果-創新互聯

這期內容當中小編將會給大家帶來有關在vue項目中使用Element-ui制作一個分頁效果，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

我們提供的服務有：成都網站制作、成都做網站、微信公眾號開發、網站優化、網站認證、衡陽縣ssl等。為1000多家企事業單位解決了網站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的衡陽縣網站制作公司

當我們向后臺請求大量數據的時候，并要在頁面展示出來，請求的數據可能上百條數據或者更多的時候，并不想在一個頁面展示，這就需要使用分頁功能來去完成了。

1.本次所使用的是vue2.0+element-ui實現一個分頁功能，element-ui這個組件特別豐富，分頁中給我提供了一個Pagination 分頁，使用Pagination 快速完成分頁功能

最終效果展示

<div class="deit">
  <div class="crumbs">
   <el-breadcrumb separator="/">
      <el-breadcrumb-item><i class="el-icon-date"></i> 數據管理</el-breadcrumb-item>
      <el-breadcrumb-item>用戶列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="cantainer">
          <el-table 
          :data="userList.slice((currentPage-1)*pagesize,currentPage*pagesize)" //對數據請求的處理，最為重要的一句話
          >
            <el-table-column type="index" width="50">  
            </el-table-column>
            <el-table-column label="日期" prop="date" width="180">  
            </el-table-column>
            <el-table-column label="用戶姓名" prop="name" width="180">  
            </el-table-column>
            <el-table-column label="郵箱" prop="email" width="180">  
            </el-table-column>
            <el-table-column label="地址" prop="address" width="200">  
            </el-table-column>  
          </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 20, 40]" //這是下拉框可以選擇的，每選擇一行，要展示多少內容
              :page-size="pagesize"     //顯示當前行的條數
              layout="total, sizes, prev, pager, next, jumper"
              :total="userList.length">  //這是顯示總共有多少數據，
          </el-pagination>
    </div>
  </div>
</div>

網站名稱：在vue項目中使用Element-ui制作一個分頁效果-創新互聯
地址分享：http://m.kartarina.com/article34/dicsse.html

成都網站建設公司_創新互聯，為您提供定制網站、做網站、網站營銷、靜態網站、營銷型網站建設、微信公眾號

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯