element-ui官網(wǎng)上有分頁(yè)實(shí)現(xiàn)的功能，簡(jiǎn)單方便又好用，也有很多分頁(yè)的樣式，你可以根據(jù)需要去選擇自己想要的樣式。這里講的是完整功能樣式的一個(gè)分頁(yè)實(shí)現(xiàn)。過(guò)程如下：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-538937.html
一、寫一個(gè)table，并添加分頁(yè)
<template>
<div class="table-box">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="phone" label="手機(jī)號(hào)">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
<div class="paginationBlock">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10, 20, 30, 40, 50,100]" :page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
</div>
</template>
二、定義分頁(yè)數(shù)據(jù)
data() {
return {
tableData:[],
total: 0,
currentPage: 1,
pageSize: 5,
}
},
三、引入接口，定義獲取數(shù)據(jù)的方法和分頁(yè)觸發(fā)的方法
<script>
//接口名稱自定義
import { getTableListApi } from '@/api/demoApi/tableDemoApi'
export default {
name: 'pagination-demo',
data() {
return {
tableData:[],
total: 0,
currentPage: 1,
pageSize: 5,
}
},
created() {
//獲取列表數(shù)據(jù)
this.getTableList()
},
methods: {
getTableList() {
let data = {
pageIndex: this.currentPage,
pageSize: this.pageSize,
}
getTableListApi(data).then((res) => {
this.tableData = res.result
this.total = res.total
this.currentPage = res.pageIndex
this.pageSize = res.pageSize
})
},
handleSizeChange(val) {
this.pageSize = val
this.currentPage = 1
this.getTableList()
},
handleCurrentChange(val) {
this.currentPage = val
this.getTableList()
},
},
}
</script>
分頁(yè)方法完成。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-538937.html
到了這里，關(guān)于vue使用element-ui實(shí)現(xiàn)分頁(yè)功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
