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

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：左树右表：

---

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