资讯专栏INFORMATION COLUMN

封装一个优雅的element ui表格组件

singerye / 1931人阅读

摘要:现在做后台系统用的越来越多,那的组件肯定也离不开。虽然的组件很好。这个就比较麻烦了。那我们可不可以把表格和分页封装在一起呢照这个思路那我们重新封装一个带分页的表格。

现在做后台系统用vue + elementUI 的越来越多,那element ui的 el-table 组件肯定也离不开。虽然element ui的table组件很好。但是表格和分页是分离的。每次写表格的时候都要写分页。这个就比较麻烦了。那我们可不可以把表格和分页封装在一起呢?照这个思路那我们重新封装一个带分页的表格。

思路:

表格组件要包含分页,不用每次都重新写分页

尽量保证el-table原生方法

方便易用

照这个思路我们开始写代码
先把表格和分页写在一起


别人使用起来非常简单 ,也不用再写任何请求方法
可以全局引入

 
    //下面的使用方式和el-table一样
    
            
        
        
            
        
    

如果想刷新数据 使用reload方法即可. this.$refs.table.reload()

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/99928.html

相关文章

  • vue封装element-uitable组件,灵活配置表头实现表格内编辑,按钮,链接等功能。

    摘要:一封装的组件定义表格高度全屏增加前台分页功能。表格内编辑后,自动选中该行。单元格内数据样式单元格内按钮,可多个。触发组件绑定函数,参数按钮名称,按钮样式,按钮事件标识。单元格是否可点击的判断函数,可进行复杂的函数判断。 vue-bxz-table 一、封装element-ui的table组件: 定义表格高度全屏 增加前台分页功能。 自定义表头,循环输出整体表结构。 表格内编辑(输入框...

    henry14 评论0 收藏0
  • 手摸手,带你用vue撸后台 系列三(实战篇)

    摘要:社区的认可目前已经是相关最多的开源项目了,体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。 完整项目地址:vue-element-admin 系类文章一:手摸手,带你用vue撸后台 系列一(基础篇)系类文章二:手摸手,带你用vue撸后台 系列二(登录权限篇)系类文章三:手摸手,带你用vue撸后台 系列三(实战篇)系类文章四:手摸手,带你用vue撸后台 系列...

    Channe 评论0 收藏0
  • 手摸手,带你用vue撸后台 系列三(实战篇)

    摘要:社区的认可目前已经是相关最多的开源项目了,体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。 完整项目地址:vue-element-admin 系类文章一:手摸手,带你用vue撸后台 系列一(基础篇)系类文章二:手摸手,带你用vue撸后台 系列二(登录权限篇)系类文章三:手摸手,带你用vue撸后台 系列三(实战篇)系类文章四:手摸手,带你用vue撸后台 系列...

    zgbgx 评论0 收藏0
  • D2 Crud,一款简单易用表格组件

    摘要:是一套基于和的表格组件。将的功能进行了封装,并增加了表格的增删改查数据校验表格内编辑等常用的功能。大部分功能可由配置实现,在实现并扩展了表格组件功能的同时,降低了开发难度,减少了代码量,大大简化了开发流程。 D2-Crud 是一套基于Vue.js 2.2.0+ 和 Element UI 2.0.0+ 的表格组件。D2-Crud 将 Element 的功能进行了封装,并增加了表格的增删改...

    fevin 评论0 收藏0
  • 【收藏】2019年最新Vue相关精品开源项目库汇总

    摘要:前言本文的前身是源自上的项目但由于该项目上次更新时间为年月日,很多内容早已过期或是很多近期优秀组件未被收录,所以小肆今天重新更新了内容并新建项目。提交的项目格式如下项目名称子标题相关介绍如果收录的项目有错误,可以通过反馈给小肆。 前言 本文的前身是源自github上的项目awesome-github-vue,但由于该项目上次更新时间为2017年6月12日,很多内容早已过期或是很多近期优...

    williamwen1986 评论0 收藏0

发表评论

0条评论

singerye

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<