在vue項(xiàng)目中使用Element-ui制作一個(gè)分頁(yè)效果-創(chuàng)新互聯(lián)

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)在vue項(xiàng)目中使用Element-ui制作一個(gè)分頁(yè)效果，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

我們提供的服務(wù)有：成都網(wǎng)站制作、成都做網(wǎng)站、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、衡陽縣ssl等。為1000多家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的衡陽縣網(wǎng)站制作公司

當(dāng)我們向后臺(tái)請(qǐng)求大量數(shù)據(jù)的時(shí)候，并要在頁(yè)面展示出來，請(qǐng)求的數(shù)據(jù)可能上百條數(shù)據(jù)或者更多的時(shí)候，并不想在一個(gè)頁(yè)面展示，這就需要使用分頁(yè)功能來去完成了。

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

最終效果展示

<div class="deit">
  <div class="crumbs">
   <el-breadcrumb separator="/">
      <el-breadcrumb-item><i class="el-icon-date"></i> 數(shù)據(jù)管理</el-breadcrumb-item>
      <el-breadcrumb-item>用戶列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="cantainer">
          <el-table 
          :data="userList.slice((currentPage-1)*pagesize,currentPage*pagesize)" //對(duì)數(shù)據(jù)請(qǐng)求的處理，最為重要的一句話
          >
            <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]" //這是下拉框可以選擇的，每選擇一行，要展示多少內(nèi)容
              :page-size="pagesize"     //顯示當(dāng)前行的條數(shù)
              layout="total, sizes, prev, pager, next, jumper"
              :total="userList.length">  //這是顯示總共有多少數(shù)據(jù)，
          </el-pagination>
    </div>
  </div>
</div>

網(wǎng)站名稱：在vue項(xiàng)目中使用Element-ui制作一個(gè)分頁(yè)效果-創(chuàng)新互聯(lián)
地址分享：http://bm7419.com/article34/dicsse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、做網(wǎng)站、網(wǎng)站營(yíng)銷、靜態(tài)網(wǎng)站、營(yíng)銷型網(wǎng)站建設(shè)、微信公眾號(hào)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)