vue项目一直在用的pc端后台管理系统的组件库是ElementUI
,但是在最近的项目中使用了avue-crud
这个组件,他是Avue这个库里面的表格组件。这是github。
表格使用体验,相比于饿了么,堪称神器,他是基于elementUI封装的更好用的组件库。如果你写的是后台管理这一类项目,体验会很棒,我说的是有大量表格的时候,因为它把一个完整的增删改查
全部封装了,棒呆。
进入官网会提示点赞,就会获取一套基于Avue的后台管理项目模板,这一类模板也挺多的开源,比如vue-admin-element,这是它的github,我也用过他的简化版vue-admin-template
,体验不错。
示例1:下面这个示例,有搜索栏,头部工具栏(新增,刷新列表,列配置,搜索收缩),表格以及表格里面的操作栏,像这种最简单的效果和逻辑实现,如果用elementUI,代码量和逻辑可想而知,但是用这个组件只用一行代码,所有东西都在配置项里:
<avue-crud
:option="option"
:search.sync="search"
:data="data"
@search-change="searchChange">
</avue-crud>
示例2:有分页的表格依然是进行参数配置page
即可:
<avue-crud
:data="data"
:option="option"
:page.sync="page"
@on-load="onLoad"
></avue-crud>
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
}
示例3:表尾合计行:
示例3:自定义多行表头:
示例3:空状态:
示例3:行展开:
示例3:导出:
示例3:打印:
示例3:左树右表:
以上说的都是项目中比较常见的,他都进行了封装,当然这只是其中一部分,还有表格编辑弹窗里的表单组件和配置,都非常方便,具体的详细配置信息可以看官网介绍,总之,棒呆!