Element UI 的分页组件

分页组件

<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
        },
}