element plus 分页组件的简单使用 添加尾页

//分页组件
<template>
  <div class="pageSize">
    <div class="paginaTion">
      <el-pagination
        background
        class="mt-4"
        layout="prev, pager, next"
        :current-page="props.data.pageIndex"
        :page-size="props.data.pageSize"
        :total="total"
        @current-change="handleChange"
      />
      <div class="endPage">
        <el-button @click="handleLast">尾页</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
const props = defineProps({
  total: Number,  //获取总条数
  getData: Function,  //获取调用数据函数 点击分页之后更新数据
  data: Object,  //获取分页参数
});
//切换每一页事件
const handleChange = (curr) => {
  props.data.pageIndex = curr;
  props.getData(props.data);
};
//跳转尾页事件
const handleLast = () => {
  const maxPage = Math.ceil(props.total / props.data.pageSize);
  if (props.data.pageIndex !== maxPage) {
    props.data.pageIndex = maxPage;
    props.getData(props.data);
  }
};

在需要用的页面引入分页组件

//使用
<template>
<div class="infoListItem" v-for="(item, index) in infoListData" :key="item.id">
     {{ item.name }}
</div>
<paginaTions
        :total="total"
        :getData="getData"
        :data="data">   
</paginaTions>
</template>

<script setup>
import { ref, reactive ,onMounted} from "vue";
import { getInfo } from "@/api/achieveApi";
import paginaTions from "@/components/paginaTions/index.vue"; //引入
// data为调用接口时传递的参数  例如分页参数
const data = reactive({
  pageIndex: 1,
  pageSize: 6,
 checkstate: 1
});
const total = ref(0); //数据总条数
const infoListData = ref([]); //存放所有数据的数组
const getData = (data) => {
  getInfo(data).then((res) => {
    total.value = res.data.totalCount;
    infoListData.value = res.data.currentPageDatas;
  });
};
onMounted(() => {
  getData(data);
});
</script>

最后

以上就是舒适早晨为你收集整理的element plus 分页组件的简单使用 添加尾页的全部内容，希望文章能够帮你解决element plus 分页组件的简单使用 添加尾页所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。