使用vue的分页实现自定义分页、多个slot的处理方案

最新推荐文章于 2025-02-27 15:43:48 发布

棹如飞

最新推荐文章于 2025-02-27 15:43:48 发布

阅读量6.1k

点赞数 8

文章标签： vue html

本文链接：https://blog.csdn.net/qq_42431872/article/details/106097979

版权

本文介绍了一种在Vue中利用el-pagination组件实现自定义分页布局的方法，通过组合多个el-pagination组件来满足复杂的需求，如首页、尾页、当前页等自定义显示，并提供了完整的组件代码及调用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于vue的标签el-pagination当中的layout只能存在一个自定义slot，所以当需要自定义多个slot时，就考虑用多个el-pagination拼接到一起，比如要实现如下需求
类似需求样式
从组件库中的分页改造在这里插入图片描述
其中当前第几页共几页、首页(可点击)、尾页(可点击)三个地方是自定义的slot，所以拆成三个独立的el-pagination,layout分别为(total,slot,sizes)(slot)(prev, pager, next, slot, jumper)对应下图红色方框的三个部分

由于系统多处使用分页所以此处将他抽取为组件以供方便使用。组件完整代码如下

<template>
  <div class="app-container calendar-list-container">
   <div class="pagination-container" style="float: left;margin-bottom: 30px">
      <el-pagination background @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :page-sizes="pageSizes" :page-size="limit"
                     layout="total, slot, sizes" :total="total" style="float: left;">
        <span>{{'当前第' + page + '页' + ',   ' + '共' + this.lastPage + '页'}}</span>
      </el-pagination>
      <el-pagination background @size-change="handleSizeChange" :firstPage="firstPage"
                     @current-change="handleCurrentChange"
                     :page-sizes="[20,100,300, 500]" :page-size="limit"
                     layout="slot" :total="total" style="float: left;">
        <el-button
          :disabled="page === firstPage"
          class="first-pager"
          @click="toFirstPage"
        >首页</el-button>
      </el-pagination>
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="page" :page-sizes="pageSizes"
                     :page-size="limit" :lastPage="lastPage"
                     layout="prev, pager, next, slot, jumper" :total="total"style="float: left;margin-left: -10px;">
        <el-button
          :disabled="page === lastPage"
          class="first-pager"
          @click="toLastPage"
        >尾页</el-button>
      </el-pagination>
      <el-button circle @click="handleGo">{{'go'}}</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'pagination',
    props: { // 父页面传值
      page: {
        type: Number
      },
      limit: {
        type: Number
      },
      total: {
        type: Number
      },
      pageSizes: {
        type: String
      }
    },
    data() {
      return {
        firstPage: 1,
        lastPage: 1
      }
    },
    created() {
    },
    computed: {
      lastPage: function() { return Math.ceil(this.total / this.limit) }
    },
    methods: {
      // 首页
      toFirstPage() {
        this.$emit('handleChildGetList', this.firstPage, this.limit)
      },
      // 尾页
      toLastPage() {
        this.$emit('handleChildGetList', this.lastPage, this.limit)
      },
      // 响应数据列表选择页面显示记录数事件
      handleSizeChange(val) {
        this.$emit('handleChildGetList', 1, val)
      },
      // 响应数据列表选择页码事件
      handleCurrentChange(val) {
        this.$emit('handleChildGetList', val, this.limit)
      },
      // 响应go事件
      handleGo() {
        this.$emit('handleChildGetList', this.page, this.limit)
      }
    }
  }
</script>

要调用时需要传(page、limit、total、pageSizes)给子组件，从子组件传回handleChildGetList

    <pagination :page="antiWaterListQuery.page" :limit="antiWaterListQuery.limit" :total="total"
                :pageSizes="[20,100,300, 500]" v-on:handleChildGetList="handleParentGetList">	</pagination>

 // 引入
    import pagination from '../common/components/pagination'

  components: {
    pagination
  },

      // 响应分页组件查询事件
    handleParentGetList(page, limit) {
      this.antiWaterListQuery.page = page
      this.antiWaterListQuery.limit = limit
      // 调用查询方法
      this.getConfigList()
    },