vue（九）：elementUI分页插件的插槽slot的用法

最新推荐文章于 2025-06-25 20:43:42 发布

原创最新推荐文章于 2025-06-25 20:43:42 发布 · 1.8w 阅读

21 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

44 篇文章

订阅专栏

本文介绍如何使用Vue结合ElementUI自定义分页组件，通过插槽(slot)实现首页、末页按钮及确定功能，并讲解了组件间的传值方法。

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

这几天在做一个管理系统，然后遇到了一个分页的问题，因为一开始就是用vue结合elementui开发的，所以分页就用到了elementui的分页功能，但是官网给的例子不符合我开发的需求，所以呢，就需要进行改造，关键是怎么改造呢，
重点来了slot插槽
这里写图片描述
上面的图片，展示的是我这次要实现的效果，我看了官网的，有一个跟我的很像，但还是有区别

现在呢，我们就根据这个代码进行改造哈
直接附上我的代码了哈，困了，有不懂的可以留言，

     <div class="block">
            <el-pagination  background  @size-change="handleSizeChange"   @current-change="handleCurrentChange" :current-page="currentPage"  :page-size="pageSize" layout="total, sizes, slot,prev" :total="total">
                        <div class="first-pager" @click="jumpPage('1')">首页</div>
            </el-pagination>
            <el-pagination  background  @size-change="handleSizeChange"   @current-change="handleCurrentChange" :current-page="currentPage"  :page-size="pageSize" layout="pager,next,slot, jumper" :total="total">
                        <div class="last-pager" @click="jumpPage('0')">末页</div>
            </el-pagination>
            <el-pagination  background  @size-change="handleSizeChange"   @current-change="handleCurrentChange" :current-page="currentPage"  :page-size="pageSize" layout="slot" :total="total">
                        <div class="ensure-btn" @click="clickEnter()">确定</div>
            </el-pagination>
      </div>

js部分

 jumpPage(val){
          switch(val){
              case "1"://跳转到首页
                    this.$emit('changeCurrentPage', 1);
                    break;
              case "0"://跳转到末页
                    this.$emit('changeCurrentPage', this.total/this.pageSize);
                    break;
            }
      },
      clickEnter(){
            this.$emit('changeCurrentPage', this.currentPage);
      }