vue element-ui 分页组件封装
<template>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" style="float:right;">
</el-pagination>
</template>
<script type="text/ecmascript-6">
export default {
components: { },
data() {
return { }
},
props: {
pageSize: {
type: Number,
default: 10
},
total: {
type: Number,
default: 1
}
},
watch: { },
methods: {
//每页展示条数
handleSizeChange(val) {
//事件传递
this.$emit('handleSizeChangeSub', val);
},
//当前页
handleCurrentChange(val) {
//事件传递
this.$emit('handleCurrentChangeSub', val);
}
},
// 过滤器设计目的就是用于简单的文本转换
filters: {},
// 若要实现更复杂的数据变换,你应该使用计算属性
computed: { },
created() { },
mounted() {},
destroyed() {}
}
</script>
<style lang="scss" type="text/css" scoped>
</style>
调用
// 分页
import pages from 'components/common/pages/pages'
components: {
pages
},
<pages :total="total" :page-size="pageSize" @handleSizeChangeSub="handleSizeChangeFun" @handleCurrentChangeSub="handleCurrentChangeFun"></pages>
handleSizeChangeFun(v) {
this.pageSize = v;
this._enterpriseList(); //更新列表
},
handleCurrentChangeFun(v) { //页面点击
this.pageNum = v; //当前页
this._enterpriseList(); //更新列表
}
vue element-ui 分页组件封装的更多相关文章
- vue+element ui table组件封装,使用render渲染
后台管理经常会用到表格,一开始封装了一个常用的功能性表格,点击这里: 后来由于需求增加,在表格中还会用到switch,select,input等多种组件,每次都要在html中增加<el-tabl ...
- [转]vue Element UI走马灯组件重写
https://blog.csdn.net/u013750989/article/details/82885482 1.element ui走马灯组件 -- carousel分析一波源代码:carou ...
- vue+element UI以组件递归方式实现多级导航菜单
介绍 这是一个是基于element-UI的导航菜单组件基础上,进行了二次封装的菜单组件,该组件以组件递归的方式,实现了可根据从后端接收到的json菜单数据,动态渲染多级菜单的功能. 使用方法 由于该组 ...
- vue+element ui 的上传文件使用组件
前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...
- vue+element ui 的表格列使用组件
前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...
- vue+element ui中select组件选择失效问题原因与解决方法
codejing 2020-07-10 09:13:31 652 收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...
- 基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
- vue + element ui 实现实现动态渲染表格
前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...
- vue+element ui 的tab 动态增减,切换时提示用户是否切换
前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui 有一个 bug,这里记录一下如何实现.转载 ...
- Vue+element ui table 导出到excel
需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...
随机推荐
- Vue.js-10:第十章 - 组件间的数据通信
一.前言 在上一章的学习中,我们继续学习了 Vue 中组件的相关知识,了解了在 Vue 中如何使用组件的 data.prop 选项.在之前的学习中有提到过,组件是 Vue 中的一个非常重要的概念,我们 ...
- java基础(八)-----深入解析java四种访问权限
Java中的访问权限理解起来不难,但完全掌握却不容易,特别是4种访问权限并不是任何时候都可以使用.下面整理一下,在什么情况下,有哪些访问权限可以允许选择. 一.访问权限简介 访问权限控制: 指的是本类 ...
- Python中最好用的命令行解析工具:argparse
Python 做为一个脚本语言,可以很方便地写各种工具.当你在服务端要运行一个工具或服务时,输入参数似乎是一种硬需(当然你也可以通过配置文件来实现). 如果要以命令行执行,那你需要解析一个命令行参数解 ...
- html学习之路--简单图片轮播
一个简单的图片轮播效果 photo.html页面代码,基本的HTML结构,在main中显示图片,此处图片依次命名为1.jpg.2.jpg.3.jpg.4.jpg. <!DOCTYPE html& ...
- 5G 时代,可能是什么样呢?
(摄于上海陆家嘴) 众所周知,5g时代即将到来,其相关的区块链技术也将在更多的领域以及方面发挥越来越多的作用. 与新模式与新领域这种软性变化不同,新技术的产生,有着足够的想象空间.仅从内容创作 ...
- SQLsever存储过程分页查询
使用存储过程实现分页查询,SQL语句如下: USE [DatebaseName] --数据库名 GO /****** Object: StoredProcedure [dbo].[Pagination ...
- 【转载】Sqlserver数据库备份的几种方式
在实际的数据库Sqlserver的运维的过程中,很多时候我们需要做到数据的备份操作,可以做到定时备份,也可以进行手动数据库备份.在实际的过程中,有时候因业务需要备份出完整数据库,而有时候又因为实际业务 ...
- MySQL中的自适应哈希索引
众所周知,InnoDB使用的索引结构是B+树,但其实它还支持另一种索引:自适应哈希索引. 哈希表是数组+链表的形式.通过哈希函数计算每个节点数据中键所对应的哈希桶位置,如果出现哈希冲突,就使用拉链法来 ...
- python的进程与线程(三)
线程的锁 1.几个概念 讲起线程的锁,先要了解几个概念:什么是并行?什么是并发?什么是同步?什么是异步? 并发:是指系统具有处理多个任务(动作)的能力 并行:是指系 ...
- 一句话,讲清楚java泛型的本质(非类型擦除)
背景 昨天,在逛论坛时遇到个这么个问题,上代码: public class GenericTest { //方法一 public static <T extends Comparable< ...