前端实现分页

dialog 部分的代码

<HomeDialog :dialog-object="dialogObjDelDef" @dialogClose="dialogCloseDef" @dialogSuccess="dialogSuccessDef">
      <template #default>
   
        <div class="bottom">
          <div class="bottomLeft">
            <div v-for="(item, index) in homeMenu.menuList" :key="index" class="bottomItemEvery"
              :class="bacShow === index ? 'Pactive' : ''" @click="getPersonDialogres(index)">
              {{ item }}
            </div>
          </div>
          <div class="bottomRight">
          //绑定数据personTable（后端数据截取后的数据）
            <el-table  :data="personTable" 
              :row-style="rowState" style="width: 100%">
              <el-table-column prop="userName" label="姓名" width="180" />
              <el-table-column prop="deptName" label="部门" width="180" />
              <el-table-column prop="userNumber" label="工号" width="180" />
            </el-table>
            <div class="pagination">
            //当前哪一页（personPage），页面大小：personSize，数据条数：personTotal
              <el-pagination v-model:currentPage="personPage" v-model:page-size="personSize" :total="personTotal"
                layout="prev, pager, next" />
            </div>
          </div>
        </div>
      </template>
    </HomeDialog>

//请求接口
let totalPersonTable = ref([]);
//当前页，页面大小，某页要展示的数据的条数
let personPage = ref(1);
let personSize = ref(6);



async function getPersonDialogres(index) {
  const { data: { rows }} = await personDialogres(index);
  totalPersonTable.value = rows;
}


//usePagination是自定义hooks，传入后端的总数居（totalPersonTable）和当前页码和页面大小
let personTable = usePagination(totalPersonTable, personPage, personSize);

下面是封装的usePagination模块
//
import { ref, watch } from 'vue';
export function usePagination(totalList, pageIndex, pageSize) {
  const list = ref([]);
  watch(
    [totalList, pageIndex, pageSize, num],
    () => {
      list.value = totalList.value.slice((pageIndex.value - 1) * pageSize.value, pageIndex.value * pageSize.value);
    },
    { immediate: true }
  );
  return list;
}
//