必要
バックエンドは Python で、ページングの深さには最大の制限があります (フロントエンドとしては、なぜそのような制限があるのか理解できません)。データの総量は数十億で、ページング サイズは 10/20/ 50/100 ですが、9,000 万ページある可能性があることを意味します。データがあるため、バックエンド インターフェイスを調整してページング深度の最大サイズを取得し、このサイズを超える場合はページング ボタンを無効にします。
- クリック不可のスタイルを追加する
- クリックに対して無効な JS ロジックを追加します。
効果は次のとおりです。
アイデア
1. まず初期化時に実装方法を考える
ページング情報はリスト インターフェイスから取得されます。つまり、リスト データを初期化するためにインターフェイスが呼び出されるVueときなど、ページが初期化されるときに最初に何かを行う必要があります。観察によると、一見するとページ数が数千万あり、ページ送りボタンも数千万個あるように見えますが、実際には後ろにドットボタンが3つあるため、最大数しかありません。各ページのページング ボタンをすべて取得するだけでよいので、数字ボタン で最大ページング サイズと比較し、最大ページング サイズより大きい場合は1 つ追加します。mounted
9个左右分页数最大可查询分页sizecss 的 class
2. ページ遷移時に実装
ページング サイズが変更されると、現在のページは最初のページであるホームページにリセットされるため、フロントエンドのページング サイズはデフォルトで10、20、50 、および 100 に制限されており、バックエンドは構成可能なバックエンドの最大サイズ。クエリ可能なページング深さの最小値は、フロント1000エンドのページング サイズの変更が超えないため、つまり、そのロジックを考慮する必要がありません。そうすれば、現在のページを変更するときのロジック
を考慮するだけで済みます。ページを変更する場合、el-pagination の li が変更されるため、初期化判定として el-pagination を 1 回実行し、ジャンプするページ番号、現在のページング サイズ、およびクエリ可能な最大ページング深度を比較して、プロンプトが表示されます。innerText先想初始化的时候怎么实现
コード
JS
data(){
return{
page: 0,
size: 10,
total: 0,
}
},
mounted(){
this.initAjaxData();
},
methods: {
async initAjaxData(){
const res = await xxxx; // 后端接口
if (resData.code === 0) {
this.total = resData.meta.pagination.total;
this.$nextTick(() => {
this.initElPageForbiddenBtn();
});
}
},
// 根据每次请求的结果和最大可查询size动态设置分页按钮是否可以点击 操作了DOM
initElPageForbiddenBtn() {
const elPagerBtn = document.querySelector('.el-pager');
const numberNodes = Array.from(elPagerBtn.querySelectorAll('.number'));
numberNodes.forEach((item) => {
const currentData = item.innerText; // string
if (+currentData > this.curMaxPageLimit / this.size) {
// curMaxPageLimit 为后端返回的限制
// eslint-disable-next-line no-param-reassign
item.className = 'forbidden-click';
}
});
},
handleCurrentChange(fn, page) {
this.initElPageForbiddenBtn();
if ((page * this.size) > this.curMaxPageLimit) {
this.$message.warning(`网页最大允许查询${
this.curMaxPageLimit}条数据！`);
return;
}
this.page = page;
this[fn]();
},
}
テンプレート
<el-pagination
background
@size-change="(selfSize) => handleSizeChange('initOrgAssetFn', selfSize)"
@current-change="(selfPage) => handleCurrentChange('initOrgAssetFn', selfPage)"
:current-page="page"
:page-sizes="pageSize"
:page-size="size"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
スクス
::v-deep .el-pager {
.forbidden-click{
pointer-events: none!important;
opacity: 0.6!important;
}
}