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

待我称王封你为后i 2023-02-08 12:37 12阅读 0赞

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

--------------------

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

<avue-crud 
    	:option="option" 
    	:search.sync="search" 
    	:data="data"
    	 @search-change="searchChange">
     </avue-crud>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]

--------------------

示例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
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 1]

--------------------

示例3：表尾合计行：  
![在这里插入图片描述][20200806100327920.png]  
示例3：自定义多行表头：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 2]  
示例3：空状态：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 3]

示例3：行展开：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 4]  
示例3：导出：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 5]  
示例3：打印：  
![在这里插入图片描述][20200806100623324.png]

示例3：左树右表：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 6]

--------------------

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

[Avue]: https://avuejs.com/doc/crud/crud-doc
[github]: https://github.com/nmxiaowei/avue
[vue-admin-element]: https://panjiachen.github.io/vue-element-admin-site/zh/
[github 1]: https://github.com/PanJiaChen/vue-element-admin
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]: /images/20230208/6eae1225aa024694bddb04281561aab3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 1]: /images/20230208/d9b0fa8585b846fa9b78666e332eb244.png
[20200806100327920.png]: /images/20230208/3748be7f9fae4cef884fd21f8334990a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 2]: /images/20230208/3e3d35b66a654a898113f5375b766c98.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 3]: /images/20230208/46a61ff535c24cc2a2a5025216a2ea30.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 4]: /images/20230208/7630f84527f645c282ff6e4e8cd739ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 5]: /images/20230208/e83aee3b85f5470fa307cf8636eeef6d.png
[20200806100623324.png]: /images/20230208/ebafda3e199343c085f684523ffb3c51.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 6]: /images/20230208/27ab888c9b3649af81a8585af40379cc.png