vue项目组件库Avue表格组件avue-crud

vue项目一直在用的pc端后台管理系统的组件库是ElementUI,但是在最近的项目中使用了avue-crud这个组件,他是Avue这个库里面的表格组件。这是github。
表格使用体验,相比于饿了么,堪称神器,他是基于elementUI封装的更好用的组件库。如果你写的是后台管理这一类项目,体验会很棒,我说的是有大量表格的时候,因为它把一个完整的增删改查全部封装了,棒呆。
进入官网会提示点赞,就会获取一套基于Avue的后台管理项目模板,这一类模板也挺多的开源,比如vue-admin-element,这是它的github,我也用过他的简化版vue-admin-template,体验不错。


示例1:下面这个示例,有搜索栏,头部工具栏(新增,刷新列表,列配置,搜索收缩),表格以及表格里面的操作栏,像这种最简单的效果和逻辑实现,如果用elementUI,代码量和逻辑可想而知,但是用这个组件只用一行代码,所有东西都在配置项里:


 

vue项目组件库Avue表格组件avue-crud_第1张图片


示例2:有分页的表格依然是进行参数配置page即可:




page:{
  "total": 40,
  "pagerCount": 5,
  "currentPage": 1,
  "pageSize": 20,
  "pageSizes": [
    10,
    20,
    30,
    40,
    50,
    100
  ],
  "layout": "total, sizes, prev, pager, next, jumper",
  "background": true
}

vue项目组件库Avue表格组件avue-crud_第2张图片


示例3:表尾合计行:
在这里插入图片描述
示例3:自定义多行表头:
vue项目组件库Avue表格组件avue-crud_第3张图片
示例3:空状态:

vue项目组件库Avue表格组件avue-crud_第4张图片

示例3:行展开:
vue项目组件库Avue表格组件avue-crud_第5张图片
示例3:导出:
在这里插入图片描述
示例3:打印:
在这里插入图片描述

示例3:左树右表:

vue项目组件库Avue表格组件avue-crud_第6张图片


以上说的都是项目中比较常见的,他都进行了封装,当然这只是其中一部分,还有表格编辑弹窗里的表单组件和配置,都非常方便,具体的详细配置信息可以看官网介绍,总之,棒呆!

你可能感兴趣的:(vue,Avue)