1.Pagination.vue

<template>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
background
:current-page="paginationData.currentPage"
:page-sizes="paginationData.pageSizes"
:page-size="paginationData.PageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="paginationData.total"
></el-pagination>
</template>
<script>
export default {
name: "Pagination",
props:{
paginationData:{
type:Object,
required:true
}
},
data() {
return { };
},
methods: {
handleSizeChange(val) {
this.paginationData.pageSize = val;
},
handleCurrentChange(val) {
this.paginationData.currentPage = val;
}
}
};
</script>
<style lang="scss" scoped>
</style>

2.index.js

import Pagination from './Pagination'
const compName = Pagination.name export default {
install(Vue) {
Vue.component(compName, Pagination)
}
}

3.注册

import Pagination from './components/globalComponents/pagination'
Vue.use(Pagination)

4.使用

  
 <el-table
      v-if="newList.length!==0"
      :data="computedNewsList"
 
    >
。。。

<pagination :pagination-data="paginationData"></pagination>

      // el-table里面data传给全局Pagnation组件的props值
paginationData: {
total: 0,
currentPage: 1,
pageSize: 3,
pageSizes: [3, 6, 9]
},
 computed: {
    computedNewsList() {
      // paginationData对象里面任何一个数据发生变化,都有触发
      return this.newList.slice(
        (this.paginationData.currentPage - 1) * this.paginationData.pageSize,
        this.paginationData.currentPage * this.paginationData.pageSize
      );
    }
  },
 

15 自定义分页pagination全局组件的更多相关文章

  1. Vue 使用use、prototype自定义自己的全局组件

    使用Vue.use()写一个自己的全局组件. 目录如下: 然后在Loading.vue里面定义自己的组件模板 <template> <div v-if="loadFlag& ...

  2. Vue.use自定义自己的全局组件

    通常我们在vue里面使用别人开发的组件,第一步就是install,第二步在main.js里面引入,第三步Vue.use这个组件.今天我简单的也来use一个自己的组件. 这里我用的webpack-sim ...

  3. Angular4.+ ngx-bootstrap Pagination 自定义分页组件

    Angular4 随笔(二)  ——自定义分页组件 1.简介 本组件主要是实现了分页组件显示功能,通过使用 ngx-bootstrap Pagination分页组件实现. 基本逻辑: 1.创建一个分页 ...

  4. vue 自定义分页组件

    vue2.5自定义分页组件,可设置每页显示条数,带跳转框直接跳转到相应页面 Pagination.vue 效果如下图: all: small(只显示数字和上一页和下一页): html <temp ...

  5. vue自定义分页组件---切图网

    vue2.5自定义分页组件 Pagination.vue,可设置每页显示条数,带跳转框直接跳转到相应页面,亲测有用.目前很多框架自带有分页组件比如elementUI,不过在面对一个拿到PSD稿,然后重 ...

  6. Django 分页组件替换自定义分页

    Django的分页器(paginator) 总之不太好用我们还是用自己的好一些 自定义分页器 分页实现源码 """ 自定义分页组件 """ ...

  7. Python自定义分页组件

    为了防止XSS即跨站脚本攻击,需要加上 safe # 路由 from django.conf.urls import url from django.contrib import admin from ...

  8. Django框架---- 自定义分页组件

    分页的实现与使用 class Pagination(object): """ 自定义分页 """ def __init__(self,cur ...

  9. Django的用户认证组件,自定义分页

    一.用户认证组件 1.auth模块 from django.conrtrib import auth django.contrib.auth中提供了许多方法,这里主要介绍其中的三个: 1)authen ...

随机推荐

  1. JDBC回顾

    回顾JDBC,完成查询 1 什么是JDBC JDBC(Java DataBase Connectivity)就是Java数据库连接,说白了就是用Java语言来操作数据库.原来我们操作数据库是在控制台使 ...

  2. 5、抽象工厂 abstract factory 将关联组件组成产品 创建型模式

    趁热打铁,紧跟着上一节的工厂方法模式.这一节介绍一下抽象工厂模式,以及分析俩个模式的不同 1.何为抽象模式? 抽象工厂模式(Abstract Factory Pattern)是围绕一个超级工厂创建其他 ...

  3. tableau用户分类

    1.观察消费金额的分布 直接[消费金额]直方图趋势不明显的时候,可以考虑将金额对数化处理 这样看起来就近似个正态分布了 2.怎么看超市卖的最好的产品 更深层次的分析怎么做呢? 这个聚合字段在数据源不会 ...

  4. 利用遗传算法求解TSP问题

    转载地址 https://blog.csdn.net/greedystar/article/details/80343841 目录 一.问题描述 二.算法描述 三.求解说明 四.参考资料 五.源代码 ...

  5. Maven报错Missing artifact jdk.tools:jdk.tools:jar:1.7

    1.eclipse中Maven项目的pom文件报错: 2.解决方法: 直接在pom.xml中加上一个依赖项目: <dependency>      <groupId>jdk.t ...

  6. git pull冲突的解决方案

    处理步骤: 1.先将本地修改存储起来 $ git stash 这样本地的所有修改就都被暂时存储起来 .使用git stash list可以看到保存的信息: git stash暂存修改 其中stash@ ...

  7. 企业项目实战 .Net Core + Vue/Angular 分库分表日志系统 | 控制反转搭配简单业务

    教程预览 01 | 前言 02 | 简单的分库分表设计 03 | 控制反转搭配简单业务 说明 我们上一节已经成功通过 连接提供程序存储库,获取到了 连接提供程序,但是连接提供程序和数据库连接依赖太深, ...

  8. 远程控制(远控Bin)

    一.概念 控制端:运行在攻击者的电脑中,负责控制其他肉鸡: 被控制端:需要去生成,运行在肉鸡上,木马病毒 二.使用远控Bin工具实现内网远程控制 Step1:打开Kill.exe,点击系统设置,修改监 ...

  9. Jmeter 常用函数(19)- 详解 __BeanShell

    如果你想查看更多 Jmeter 常用函数可以在这篇文章找找哦 https://www.cnblogs.com/poloyy/p/13291704.htm 作用 执行 BeanShell 脚本,并返回结 ...

  10. node.js03 第一个node.js程序和读取文件

    Hello World 1.创建运行 创建txt文件起名为hellonode,在记事本中编写JavaScript脚本文件 例如: var bbl = 'hellonode' console.log(b ...