最近、ページングコンポーネントを使用する必要があるプロジェクトがありますが、コンテンツがテーブルではないため、自分で勉強して、Pagination ページングコンポーネントをベースにページングを書きました。
レンダリング:
目次
1. まず、ページ番号、ページごとの項目数、および総ページ数を定義するいくつかの変数を宣言します。
3. 次に、ページネーションを使用して前後のページを制御します。
4. 次に、電流変更イベントでどの関数を呼び出すことができます。
原理は Pagination ページング コンポーネントの使用と似ており、対応するパラメータを対応する場所に渡すだけです。
違いは、対応するページ番号を切り替えるには、自分で関数を書いて呼び出す必要があることです。
1. まず、ページ番号、ページごとの項目数、および総ページ数を定義するいくつかの変数を宣言します。
2. 次に、後で呼び出すために関数をカプセル化します。
文字 a は最初のページを表します
文字 b は 1 ページあたりのデータ数を表します
3. 次に、ページネーションを使用して前後のページを制御します。
4. 次に、電流変更イベントでどの関数を呼び出すことができます。
| 電流変化 | current-page変更時に発火 |
ここで注意すべき点の 1 つは、各呼び出しの前にデータをクリアすることです。そうしないと、以前のデータがその下に残ったままになります。
// 分页
const value = ref('');
const handleCurrentChange = (val) => {
tableArr.value = [];
pageNum.value = val;
amount(pageNum.value, selecctNum.value);
};コード全体は次のとおりです。
<template>
<div class="content">
<div class="box" v-for="(item, index) in tableArr" :key="item.id">
<div class="under2" v-if="showCss[index]"></div>
<div class="content_box">
<p class="xxgy">学员感言</p>
<p class="say">明月几时有</p>
<div class="for_btn">
<img src="../../assets/student_img/a1.png" alt="" />
</div>
<div class="students">
<div class="students_box_mame">
<div class="name"> 姓名： </div>
<div class="names">{
{ item.name }}</div>
</div>
<div class="students_box_mame">
<div class="name"> 薪资： </div>
<div class="names">{
{ item.pay }}</div>
</div>
<div class="entry">
<div class="name">入职：</div>
<div class="names">{
{ item.company }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="pages">
<el-pagination
:current-page="pageNum"
small
background
layout="prev, pager, next,jumper"
:total="totalNum"
class="mt-4"
:page-size="selecctNum"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
// 分页
const value = ref('');
const handleCurrentChange = (val) => {
tableArr.value = [];
pageNum.value = val;
amount(pageNum.value, selecctNum.value);
};
let list_content = [
{
id: 1,
name: '测试1',
pay: '13k',
company: '腾讯有限公司',
},
{
id: 2,
name: '测试2',
pay: '15k',
company: '支付宝有限公司',
},
{
id: 3,
name: '测试3',
pay: '14k',
company: '上海科技有限公司',
},
{
id: 4,
name: '测试4',
pay: '13k',
company: '江苏科技有限公司',
},
{
id: 5,
name: '测试5',
pay: '13k',
company: '天津有限公司',
},
{
id: 6,
name: '测试6',
pay: '12k',
company: '北京有限公司',
},
{
id: 7,
name: '测试7',
pay: '16k',
company: '深圳有限公司',
},
{
id: 8,
name: '测试8',
pay: '16k',
company: '深圳有限公司',
},
{
id: 9,
name: '测试9',
pay: '16k',
company: '深圳有限公司',
},
{
id: 10,
name: '测试10',
pay: '16k',
company: '深圳有限公司',
},
{
id: 11,
name: '测试11',
pay: '16k',
company: '深圳有限公司',
},
{
id: 12,
name: '测试12',
pay: '16k',
company: '深圳有限公司',
},
{
id: 13,
name: '测试13',
pay: '16k',
company: '深圳有限公司',
},
{
id: 14,
name: '测试14',
pay: '16k',
company: '深圳有限公司',
},
{
id: 15,
name: '测试15',
pay: '16k',
company: '深圳有限公司',
},
{
id: 16,
name: '测试16',
pay: '16k',
company: '深圳有限公司',
},
{
id: 17,
name: '测试17',
pay: '16k',
company: '深圳有限公司',
},
{
id: 18,
name: '测试18',
pay: '16k',
company: '深圳有限公司',
},
{
id: 19,
name: '测试19',
pay: '16k',
company: '深圳有限公司',
},
{
id: 20,
name: '测试20',
pay: '16k',
company: '深圳有限公司',
},
];
const tableArr = ref([]);
// 第一页
const pageNum = ref(1);
// 每页多少条
const selecctNum = ref(10);
// 总页数
const totalNum = list_content.length;
// 分页处理事件
const amount = (a, b) => {
tableArr.value = [];
let c = (a - 1) * b;
if (list_content.length < a * b) {
for (let i = c; i < list_content.length; i++) {
tableArr.value.push(list_content[i]);
}
} else {
if (a * b > list_content.length) {
for (let i = c; i < list_content.length; i++) {
tableArr.value.push(list_content[i]);
}
} else {
for (let i = c; i < a * b; i++) {
tableArr.value.push(list_content[i]);
}
}
}
};
amount(pageNum.value, selecctNum.value);
</script>