精华内容
下载资源
问答
  • Element UI分页组件
    千次阅读
    2020-05-05 20:49:02

    分页组件

    <el-pagination>
    
    • 1、total:设置分页数据的总个数。

    • 2、page-size:设置每页的数据个数。(默认值:10)

    • 3、page-count:设置分页的页数。

      设置分页可以有两种方案:
      (1)设置total和page-size。
      (2)设置page-size和page-count。

    • 4、pager-count:设置可显示的最大页码个数(7)。

    • 5、prev-text:前一项替代文本。

      next-text:后一项替代文本。

    • 6、background:设置页码是否带有背景。

    • 7、hide-on-single-page:设置是否只有一页时隐藏分页组件。

    • 8、current-page:设置当前页(1)。

    • 9、small:设置分页组件为小型外观。

    • 10、layout:设置分页组件各个分量的显示外观。
      取值:下列单词任意搭配的字符串,单词之间用逗号隔开。
      sizes(每页多少条数据计数器)、
      prev(上一页)、pager(页码)、next(下一页)、
      jumper(跳转页)、
      ->(书写在该符号后面的内容右对齐)
      total(总共多少条数据)。

    • 11、size-change事件:当page-size属性发生变化时触发该事件。

      当用户在每页多少条数据计数器中进行修改时触发page-size属性的变化。

     <el-pagination @size-change=“sizeChange”>
          sizeChange(size){  //size-每页所显示的数据个数 }
    
    
    • 12、current-change事件:当current-page属性发生变化时触发该
      事件。

    当用户单击任意页码或实现页面跳转时会触发current-page属性的变化。

    <el-pagination @current-change=“currentChange”>
      currentChange(current){ 
      // current - 所改变的当前页
    }
    
    
    • 13、prev-click事件:参数为当前页码。

    • 14、next-click事件:参数为当前页码。
      例:对数据进行分页显示。
      在这里插入图片描述

    具体代码

      <!--截取页数-->
     <el-table :data="woekerAllData.slice(pageNumber * (currentChangeIndex - 1),pageNumber * currentChangeIndex)">
     
       <!--可以让分页的序号也跟着第一页排列下去-->
     <el-table-column 
     :index="pageNumber*(currentChangeIndex-1)+1" 
     label="序号" type="index" 
     align="center" width="50px>
     
       <!--分页组件-->
      <el-pagination
               @current-change="currentChange"
               :page-size="pageNumber"
               :total="woekerAllData.length"
               hide-on-single-page
             >
             </el-pagination>
    
    		data(){
    	       return{
    	          pageNumber:4,
    	          currentChangeIndex:1,
    	        }
              }
    
     methods:{
              /*点击分页事件*/
            currentChange(current){
              this.currentChangeIndex=current
            },
    }
    
    更多相关内容
  • 先放一段elementUI分页组件的代码,这里选取的是分页的全部功能: <el-pagination :current-page="currentPage" //当前页数(1) :page-sizes="[100, 200, 300, 400]" //分页时可选择每页显示多少条 :page-...

    场景:

    先放一段elementUI分页组件的代码,这里选取的是分页的全部功能:
    在这里插入图片描述

    <el-pagination
          :current-page="currentPage"                       //当前页码(4)
          :page-sizes="[100, 200, 300, 400]"                 //分页时可选择每页显示多少条
          :page-size="100"                                   //默认每页条数
          layout="total, sizes, prev, pager, next, jumper"   //组件布局,子组件名用逗号分隔
          :total="400"                                       //一共多少条
    	  @size-change="handleSizeChange"                    //切换每页显示多少条
          @current-change="handleCurrentChange"              //翻页的时候,记录当前是第几页
    </el-pagination>
    
    methods: {
          handleSizeChange(val) {
            console.log(`每页 ${val}`);
          },
          handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
          }
        },
        data() {
          return {
            currentPage: 4
          };
        }
    

    问题描述:

    使用element UI的分页组件时,每次翻页的时候记录当前的页码
    由于目前的项目分页时调用的是查询接口,所以当没有查询条件的时候,希望可以正常传当前页码到后端,
    有查询条件的时候,默认currentPage = 1(如果不等于1,当不在第一页的时候使用查询,页码不会回到第一页)

    // 分页
        handleSizeChange(size) {
          this.pageSize = size  //每页条数
          this.search()  //翻页时调用的接口
        },
        handleCurrentChange(currentPage) {
          this.currentPage = currentPage  //翻页的时候,记录当前是第几页
          this.search() //翻页时调用的接口
        },
    

    原因分析:

    组件提供了一个方法:current-change
    只有在当前页发生变化的时候才触发,翻页时记录了当前页码,刷新时没有触发,所以回不到第一页,只有去强制设置currentPage = 1


    解决方案:

    在调用接口的时候多加了一个参数,判断参数true或false来选择要不要将currentPage的值设置为1

    以下是部分代码:

        // 分页
        handleCurrentChange(currentPage) {
          this.currentPage = currentPage
          this.search(false)  // 设为false表示不需要更改currentPage的值
        },
    
    // 查询接口
        async search(y) {
          // 如果是调用查询,就更改currentPage
          if (y !== false) {
            this.currentPage = 1
          }
          //调用接口
          const res = (接口名称)({
            pageSize: this.pageSize,
            pageNum: this.currentPage,
            …… ……  //其他参数这里不展示了
          })
          this.total = res.data.total  //后端返回的,一共多少条数据
        }
    

    页面上,这里一定要写上true,来区分调接口时是分页还是查询

    <el-button type="primary" @click="search(true)" >查询</el-button>
    
    展开全文
  • 主要介绍了vue 基于element-ui 分页组件封装的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • Element-UI分页组件超详细使用示例

    万次阅读 2019-08-04 12:32:46
    为查询按钮绑定查询方法,也就是click点击事件绑定: 为分页组件绑定查询方法: 搜索官方提供的示例:

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    为查询按钮绑定查询方法,也就是click点击事件绑定:

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    为分页组件绑定查询方法:

    在这里插入图片描述

    搜索官方提供的示例:

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 目录 1.组件概述 1.background 2.@size-change 3.@current-change ...分页组件不用说就是分页显示数据的,怎么使用它呢?先从渲染效果来看吧 <el-pagination :background="true" @size-c.

    目录

    1.组件概述

    1.background

    2.@size-change

    3.@current-change

    4.:current-page

    5.:page-sizes

    6.:page-size

    7.layout

    8.:total

    2.组件使用


    1.组件概述

     分页组件不用说就是分页显示数据的,怎么使用它呢?先从渲染效果来看吧

     <div class="blocka">
                <el-pagination
                :background="true" 
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="formLibsearch.pageNum"
                :page-sizes="[2, 5, 10, 20]"
                :page-size="formLibsearch.pageSize"
                layout="total,prev, pager, next, sizes,jumper"
                :total="healthEdulist.length"
              >
              </el-pagination>
           </div>

    1.background

     第一个background用于是否为分页按钮添加背景色,不是很清楚对吧,他默认是不开启的

    效果是这样的,添加了之后我感觉就是可以改样式的,加上之后改了样式后

     

    //分页样式
    
    .blocka {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      height: 25px;
      margin-bottom: 10px;
      padding: 32px 16px;
      background: #fff;
    }
    .blocka ::v-deep .el-pagination.is-background .btn-prev,
    .blocka ::v-deep .el-pagination.is-background .btn-next,
    .blocka ::v-deep .el-pagination.is-background .el-pager li {
      margin: 0 5px;
      background-color: #fff;
      color: #606266;
      min-width: 30px;
      border-radius: 2px;
      border: 1px solid lightgrey;
    }
     
    .blocka
      ::v-deep
      .el-pagination.is-background
      .el-pager
      li.active {
      background: #1890ff;
      color: #ffffff;
    }

    主要还是看需求吧 ,样式仅供参考

    2.@size-change

    @size-change="handleSizeChange"是改变每页显示数触发函数

    3.@current-change

    @current-change="handleCurrentChange"是改变当前页码数时触发函数

    4.:current-page

    :current-page="queryParams.pageNum"是当前要显示的页码,当然动态改变页码的话要动态绑定

    5.:page-sizes

    :page-sizes="[2, 5, 10, 20]"为可选每页显示的数据量

    6.:page-size

    :page-size="queryParams.pageSize"是当前每页显示的数据量

    7.layout

     layout="total,prev, pager, next, sizes,jumper"这个就有点意思了,我写的里面的都是完整版的,每个参数对应一个模块

    这里完全可以根据自己的需求增删参数,需要哪些就写哪些参数,当然参数的排序方式决定了你的页面内容显示顺序

    8.:total

    :total="totalLength"总的数据条数

    2.组件使用

    怎么使用这个组件呢,记住一定要动态绑定属性,total和page-sizes可以默认值,和后端配合

        handleSizeChange(val) {
          this.queryParams.pageSize = val
          this.getTotalList()
        },
        handleCurrentChange(val) {
          this.queryParams.pageNum = val
          this.getTotalList()
        },

    每次改变pageSize和pageNum都要更新data中相应的pageSize和pageNum

    希望对你有用

    展开全文
  • element ui 分页实例

    2021-07-16 17:08:59
    element ui分页封装的很好,基本和展示表格没有太多关系。展示数据就不陈列出来了。思路:数据接口返回总条数,传给分页插件,点击分页会触发展示条数和页数的方法,在这两个方法里调用获取数据的接口。 1、html...
  • 1.前言在web页面中,常常需要将后台查询到的数据以表格形式展示出来,而这些数据量...但是,如果我们可以将数据分页展示,这样页面首先不会变的冗长,另外只有用户点击页码才会发出请求并且每次请求的数据量也不会...
  • 写了一个很简单的分页组件,但是放到页面页面上不能用,点击页面标签页面上一点效果都没有,也没有报错,值都传过去了,也可以打印出来,大家帮忙看看哪里出错了:current-page="currentPage":page-size="pagesize...
  • 基于vue+elementUI开发的分页组件,后端项目配置使用PageHelper,前端配合使用此组件。
  • 父子组件的方式2.混入的方式 1.父子组件的方式   新建一个名为Pagenation的组件,代码如下: <template> <div v-show="pages.total > pages.pageSize"> <el-pagination @size-change=...
  • <template> ...{ pageSize: 10, pageNum: 1, total: 0 } } </script> 直接调用就可以使用分页了,不用传参很多,十分方便,如果有更复杂的业务处理可以,自己加入
  • element ui table组件 分页 后按照顺序排序 效果如如下 template代码如下 <el-table-column label="序号" type="index" :index="handleIndex" width="120" /> type 对应列的类型。如果设置了 selection...
  • 组件的属性: 1、total:设置分页数据的总个数。 2、page-size:设置每页的数据个数。(默认值:10) 3、page-count:设置分页的页数。 设置分页可以有两种方案: (1)设置total和page-size。 (2)设置page-size...
  • Pagination公共组件/components/Pagination/index.vue <template> <div :class="{'hidden':hidden}" class="pagination-container" > <el-pagination :background="background" :current-page...
  • 1、在分页组件中加入ref以控制节点 <el-pagination background layout="prev, pager, next" :page-size="10" :current-page="screenList.pageNo" @current-change="handleCurrentChange" :total="total...
  • Element-UI分页组件如何设置成中文

    千次阅读 2021-08-19 23:24:54
    Element-UI分页组件如何设置成中文 前言 今天我在写项目的时候,发现在使用Element-UI组件的分页组件显示的是英文,不是中文: 但是我在官网上看到的却是中文显示的,而且我也想要分页组件显示成中文,于是我看了下...
  • 由于现在公司管理平台主要运用Element UI,索性就结合组件Table 和 Pagination 封装了一个支持页面切换的Table组件,不啰嗦,直接上代码。 2、实现思路 2.1、Element UI 引入(整体引入) main.js // Element UI ...
  • element ui 分页刷新问题

    千次阅读 2020-11-24 19:42:30
    在其他页码删除或进行其他需要刷新列表的操作之后,分页的页码会固定在当前页面 需要重新设置一下:current-page.sync="currentPage"的 currentPage 在调用的接口处设置 this.currentPage = 1; 以及v-if大法...
  • element-ui分页组件的bug

    2021-12-20 10:31:20
    element-ui中的table表格进行分页查询时,会出现组件bug。 ** 问题: 例如:在第一次查询后跳转到第四页,此时再进行新的条件查询,若该条件查询到的数据只有三页,查询时入参page: 4,即该页无数据,页面展示无数据...
  • 1.子组件分页页面 //pagination.vue页面 <template> <div> <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentCha...
  • 使用封装的分页组件或element-ui分页组件删除当前页最后一条数据没有跳转到上一页显示暂无数据的bug
  • element-ui列表渲染数据,底下有分页,点击查看可以跳转到详情的组件,详情的组件有一个返回键,现在的问题是每一次点击回到列表页,都是显示的第一页,也就是说我在列表页看到第三页的数据,随机点进去一个查看,...
  • ElementUI 表格分页组件

    2022-03-07 15:12:42
    ElementUI 表格分页组件 <template> <div class="pagination"> <el-pagination background :current-page="currentpage" :page-sizes="pagesizelist" :page-size="pagesize" layout="total, ...
  • 使用element-ui分页组件刷新后保留在当前页 //属性表示当前页数 :current-page.sync=“currentPage” 在created(){ }中对跳转的路径进行判断
  • 开发项目中用到条件查询功能,点击...场景如下: 1.首先点击正常分页来到第二页数据正常展示 ... 3.再次点击分页去第二页,此时分页还停留在第一页,current-change事件不触发 此问题并不是每次都出现,不过具体什么...
  • vue element-ui分页组件的封装

    万次阅读 2019-05-21 22:54:49
    为什么要封装分页组件分页组件用的最多的就是和表格一起,构成表格数据的翻页显示,当然也不仅限于表格,例如其它的流式加载、图片分批次加载等,都会用到分页组件。 这里以表格为例,通常我们写一个分页展示的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,004
精华内容 2,401
关键字:

element ui分页组件