npm 下载 npm i element-ui -S

components

创建 Page 文件夹

创建 Page.vue 文件

vue 文件

<template>
  <div class="page">
    <el-pagination
      small
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>
 
<script>
export default {
  props: ["total"],
  data() {
    return {
      // 页码参数
      page: {
        currentPage: 1,
        pageSize: 10,
      },
    };
  },
  methods: {
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.$emit("pageChange", this.page);
    }
  },
};
</script>
 
 
//用到分页的vue文件
template 部分
<page :total="page_total" @pageChange="pageChange"></page>
 
script 部分

import Page from "../Page/page"
 
components: {
        page: Page
    },
 
//分页
            page_total: 100, //总数
            page_index: 1, //页码
            page_size: 10 //每页展示条数
 
methods 方法
 
hpageChange(item) {
            this.page_index = item.currentPage;
            this.page_size = item.pageSize;
    this,getList() //传后台要的分页数据过去。
        }
 
 

vue之 分页封装的更多相关文章

  1. vue2.0 如何自定义组件(vue组件的封装)

    一.前言 之前的博客聊过 vue2.0和react的技术选型:聊过vue的axios封装和vuex使用.今天简单聊聊 vue 组件的封装. vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼 ...

  2. JS(vue iview)分页解决方案

    JS(vue iview)分页解决方案 一.解决思路 使用分页组件 使用组件API使组件自动生成页面数量 调用组件on-change事件的返回值page 将交互获得的数组存在一个数组list中 通过p ...

  3. 第二百六十七节,Tornado框架-分页封装模块

    Tornado框架-分页封装模块 框架引擎 #!/usr/bin/env python #coding:utf-8 import tornado.ioloop import tornado.web # ...

  4. python 分页 封装

    分页 封装 我是在项目根目录创建个分页文件 分页代码: class Pagination(object): def __init__(self, data_num, current_page, url ...

  5. 基于vue的分页插件

    相信大家用过很多jquery的分页插件,那这次就用一用基于vue的分页插件. 这里的环境用的是springboot 首先要引入pagehelper的jar文件,版本是1.2.3,配置文件也需要配置一下 ...

  6. Vue之优化封装请求方法

    Vue之优化封装请求方法 对于代码中的请求操作 1.接口请求可能需要重用 2.实际工作中,接口非常容易变动, 改起来很麻烦! 我们建议的做法是把所有的请求都封装成函数然后统一的>###组织到模块 ...

  7. vue自定义插件封装,实现简易的elementUi的Message和MessageBox

    vue自定义插件封装示例 1.实现message插件封装(类似简易版的elementUi的message) message组件 <template>     <transition  ...

  8. 基于iview 封装一个vue 表格分页组件

    iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...

  9. vue element-ui 分页组件封装

    <template> <el-pagination @size-change="handleSizeChange" @current-change="h ...

随机推荐

  1. jquery设置下拉框selected不起作用

    在js中设置下拉框被选中: 最初写法: //移出selected $("#selected option").removeAttr("selected"); / ...

  2. springboot整合ehcache缓存失效

    最近做了个微信公众号后台,因为只是单应用就选用了ehcache来做本地缓存,主要是用于缓存微信的accece_token和jsapi_ticket.在使用ehcache的时候遇到了@Cacheable ...

  3. 【LeetCode】209. 长度最小的子数组

    209. 长度最小的子数组 知识点:数组:前缀和:二分法:双指针:滑动窗口 题目描述 给定一个含有 n 个正整数的数组和一个正整数 target . 找出该数组中满足其和 ≥ target 的长度最小 ...

  4. 打造自己的Vue组件文档生成工具

    程序员最讨厌的两件事情,第一种是写文档,另一种是别人没有写文档.有没有直接根据vue组件生成文档的呢?当然是有的的.但第三方使用起来不一定能和现有项目结合使用,往往需要额外的注释用来标记提取信息.使用 ...

  5. 小白自学vue的第一天,加油!

    一.插值的操作 1.Mustache语法 也就是双大括号(翻译过来就是胡须的意思) 2.v-once指令 加了v-once数据不会随着数据的改变而改变,只会渲染一次 3.v-html指令 可以解析HT ...

  6. 走心的中级Android工程师跳槽经验分享

    这些经验是我最近四个月,从准备面试到找到合适工作的汗水和泪水,希望对你们能有帮助! define 跳槽 跳槽前要思考的问题 钱不到位怎么办 心委屈怎么办 离职前的思考 确定要走时需要做的准备 行情怎么 ...

  7. TCP可靠传输

    1. TCP 可靠性如何保证? 信道可靠:用三次握手.四次挥手保证连接正确: 数据正确:分区编号.校验和.超时重传: 传输控制:流量控制.拥塞控制 2. 重传机制 TCP可靠传输方式是序列号与确认应答 ...

  8. Servlet基本知识

    Servlet基本知识 1.IDEA创建第一个Servlet程序xing 这里说明如何使用 IDEA Ultimate 2020.1.3版本来新建第一个web程序.参考 MoonChasing 1.1 ...

  9. Shell-03-表达式和运算符

    表达式和运算符 条件表达式语句 [ 1 -eq 1 ] [[ 1 -eq 1 ]] test 1 -eq 1 等同于 [ 1 -eq 1 ] [root@satest_192-168-3-121 sh ...

  10. Git-08-标签管理

    标签管理 Git的标签虽然是版本库的快照,但其实它就是指向某个commit的指针 跟分支很像对不对?但是分支可以移动,标签不能移动 所以,创建和删除标签都是瞬间完成的 Git有commit,为什么还要 ...