在Vue項目中使用Element-UI如何實現(xiàn)一個分頁顯示效果-創(chuàng)新互聯(lián)

在Vue項目中使用Element-UI如何實現(xiàn)一個分頁顯示效果？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)建站從2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目網(wǎng)站制作、網(wǎng)站建設(shè)網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元商丘做網(wǎng)站,已為上家服務(wù),為商丘各地企業(yè)和個人服務(wù),聯(lián)系電話:18982081108

當(dāng)我們從后端返回的數(shù)據(jù)量很大，并且根據(jù)需求我們需要將返回的數(shù)據(jù)全部都顯示在頁面中，默認(rèn)情況下會把所有的數(shù)據(jù)全部顯示在一個頁面，這樣非常影響視覺和頁面的使用，所以需要使用分頁

我這次使用的是Vue4.0 +  Element-UI組件，Element-UI庫非常的豐富，它提供了一個分頁組件 Pagination

展示效果：這個是獲取兩個時間段的上機(jī)記錄

HTML部分：

<el-card>
 <div class="block">
 <span >
  <span class="demonstration" style='margin-right:10px'>
  開始日期
  </span>
  <el-date-picker v-model="value1" type="datetime"
  placeholder="選擇日期" format="yyyy-MM-dd HH:mm:ss"
  value-format="yyyy-MM-dd hh:mm:ss">
  </el-date-picker>
 </span>
 <span >
  <span class="demonstration" style='margin-right:10px'>
 截止日期</span>
  <el-date-picker v-model="value2" type="datetime"
 placeholder="選擇日期" value-format="yyyy-MM-dd HH:mm:ss"
  format="yyyy-MM-dd hh:mm:ss">
  </el-date-picker>
 </span>
 <el-button type="primary" 
 @click="lineCrodList">
 搜索
 </el-button>
 </div>
 <el-table :data="lineData" >
 <el-table-column prop="onTime" label="上機(jī)時間">
 </el-table-column>
 <el-table-column prop="downTime" label="下機(jī)時間">
 </el-table-column>
 <el-table-column prop="spendCash" label="花費(fèi)時間">
 </el-table-column>
 <el-table-column prop="spendCash" label="花費(fèi)金額">
 </el-table-column>
 </el-table>
 
 <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
 :page-sizes="[1, 2, 5, 10]" :page-size="pageSize"
 layout="total, sizes, prev, pager, next, jumper"
 :total="total">
 </el-pagination>
 
</el-card>

新聞標(biāo)題：在Vue項目中使用Element-UI如何實現(xiàn)一個分頁顯示效果-創(chuàng)新互聯(lián)
本文路徑：http://muchs.cn/article12/hegdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設(shè)、網(wǎng)站設(shè)計公司、響應(yīng)式網(wǎng)站、企業(yè)建站、網(wǎng)站收錄、全網(wǎng)營銷推廣

廣告

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