このようなシナリオがあります。バックエンド インターフェイスのリスト データはページングされません。これは、すべてのリスト データを直接返すのと同じです。たとえば、アイテムが 100 個ある場合は 100 を返しますが、フロントエンド インターフェイスは、終了表示はページ化する必要があります。たとえば、10 項目が 1 ページです。
1. elementUI+vueを使ってフロントエンドページングを実現する方法
vue を使用してそれを実現する場合、データを切り取ってバッチで表示するという考え方になります。
computedしたがって、計算されたプロパティとv-forディレクティブを使用して、フロントエンド ページングを実装できます。
バックエンドから返されるデータは通常配列に格納されているため、1ページ目を表示するには実際には配列内の添え字0～9のデータ項目を分割して抽出することになります。3ページ目であれば抽出します。配列内の 20 ～ 29 番目のデータ項目を取得し、計算属性を作成し、計算属性でのデータ抽出を完了して、それをビューに渡します。
結合されたページネーション コンポーネントが必要な場合elementUI、どうすれば実現できますか? 以下に実装方法を示します。バックエンドが与えるページネーションと同じ効果があります。
<!--这里的paginatedData就是根据list进行切割的计算属性-->
<el-table :data="paginatedData" border style="width: 100%">
<el-table-column type="index" label="序号" :index="indexMethod" width="60" header-align="center" align="center"> </el-table-column>
<el-table-column prop="customerName" label="客户名称" min-width="130"> </el-table-column>
<el-table-column prop="chainName" label="业务名称" min-width="120"> </el-table-column>
<el-table-column prop="statisticsPeriod" label="统计周期" min-width="80"> </el-table-column>
<el-table-column prop="dateCycle" label="时间周期" min-width="150"> </el-table-column>
</el-table>
<!--这里的pagination分页组件不需要做任何改动-->
<div class="pagination-container">
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10, 30, 50]" :page-size="listQuery.pageNum" layout="total, sizes, prev, pager, next, jumper" :total="totalNum"> </el-pagination>
</div>
<script>
export default {
data() {
return {
list: [] //后端接口给的列表数据（未分页，全部返回）
}
},
created() {
//请求后端数据
this.getList();
},
computed: {
// 使用前端实现分页的计算数据
paginatedData() {
// 分页的起始下标
const startIndex = (this.listQuery.page - 1) * this.listQuery.pageNum;
// 分页的末尾下标
const endIndex = startIndex + this.listQuery.pageNum;
// 返回切割后的数据
return this.list.slice(startIndex, endIndex);
},
// 总条数
totalNum() {
return this.list.length;
},
// 总分页数
total() {
return Math.ceil(this.list.length / this.listQuery.pageNum);
}
},
methods:{
//数据
getList() {
//调用后端接口
staticsList().then((res) => {
this.list = res.data;
});
},
// 每页列表数
handleSizeChange(val) {
this.listQuery.pageNum = val;
},
// 当前分页数（第几页）
handleCurrentChange(val) {
this.listQuery.page = val;
},
}
}
</script>
このようにして、フロントエンドのページネーションを実現できます。
2. 一般的なフロントエンド ページング コード
elementUIプロジェクトでフレームワークを使用しない場合は、実際には簡単に処理できます。重要なのは、上記のフロントエンド ページネーションの考え方を覚えておくことです。つまり、特定のページの開始添え字と終了添え字を見つけて、そのページを分割します。配列を取得してビューに返します。
サンプルコードは次のとおりです。
<template>
<div>
<ul v-for="item in paginatedData" :key="item.id">
<!-- 显示需要显示的数据 -->
<li>{
{item.name}}</li>
</ul>
<div>
<!-- 显示分页控件 -->
<button v-for="pageNumber in totalPages" :key="pageNumber" @click="currentPage = pageNumber">
{
{ pageNumber }}
</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
data: [], // 假如这里就是你通过接口获取到的所有的数据（未分页）
itemsPerPage: 10, // 每页显示的数据量
currentPage: 1 // 当前页码
};
},
computed: {
paginatedData() {
const startIndex = (this.currentPage - 1) * this.itemsPerPage;
const endIndex = startIndex + this.itemsPerPage;
return this.data.slice(startIndex, endIndex);
},
totalPages() {
return Math.ceil(this.data.length / this.itemsPerPage);
}
}
};
</script>
この例では、v-forコマンドを使用して各ページに表示するデータを走査し、slice()メソッドを使用して現在のページ番号に対応するデータを取得します。また、ページネーション コントロールにすべてのページ番号が表示されるように、合計ページ数も計算します。
テンプレートでは、v-forコマンドを使用して各ページに表示されるデータをトラバースし、ページネーション コントロールでコマンドを使用してv-forすべてのページ番号を表示します。各ページ番号ボタンにイベントをバインドしますclick。これにより、ボタンがクリックされると現在のページ番号が更新されます。
Web フロントエンド開発、面接、フロントエンド学習ルートで問題がある場合は、V: imqdcnn を追加してください。無料で質問に回答し、長年業界に深く携わってきた技術専門家がバグの解決を支援します。
優秀なWEBフロントエンド開発エンジニアになってください！