ant design vue table 高度自适应_Vue组件库大评测 Element, iView, HeyUI, Ant Design Vue

今天偶然的机会想了解下其他Vue相关的组件库，网上刚好有文章，顺便自己做一下笔记，算是资源整理吧。好了，话不多说，直接开始：

组件库的选择对于前端开发有者至关重要的影响，而组件的丰富性以及健壮性是我们要考虑的重点。

所以，本次对比，主要是从组件的多少，以及核心组件的对比来评判。

一、组件库

1、Element-UI

官方网站：https://element.eleme.cn/#/zh-CN；

2、iView UI

官方网站：https://www.iviewui.com/；

3、Ant Design of Vue

官方网站：https://vue.ant.design/docs/vue/introduce-cn/；

4、HeyUI

官方网站：https://www.heyui.top/；

二、组件对比

1、基础组件

四个组件库，大概有47个都具备的组件。

Grid 栅格
Layout 布局
Icon 图标
Button 按钮
Input 输入框
Radio 单选
Checkbox 多选
Select 下拉选择
AutoComplete 模糊匹配
NumberInput 数字输入
Switch 开关
Slider 滑块
Rate 评分
SwitchList 选项切换
Form 表单
Search 搜索框
Uploader 上传
Tree 树
Transfer 穿梭框
DatePicker 日期选择
TimePicker 时间选择
DatetimePicker 日期时间选择
DateRangePicker 日期范围选择
Cascader 级联选择
Breadcrumb 面包屑
Menu 菜单
Pagination 分页
Tabs 标签页
Steps 步骤条
DropdownMenu 下拉菜单
BackTop 返回顶部
Panel 面板
Tag 标签
Table 表格
Avatar 头像信息
Badge 微标数
Carousel 走马灯
Collapse 折叠面板
Progress 进度条
Loading 加载中
LoadingBar 加载进度条
Timeline 时间轴
Message 提示
Notice 通知
Modal 弹出框
Tooltip 气泡提示
Poptip 确定提示

PS：每个组件库不一定是相同的明名，但是大致是一样的组件。

2、Table组件对比

PS：统计中关于“自定义索引”，iview 与 Ant Design Vue我并未看到相关文档，不一定正确。

相对来说，Element和Ant Design Vue在Table上的功能稍微比较多，如果，开发项目中的Table应用需求比较多，建议使用这两种。

3、对比总结

在目前的时间节点来看，每一种组件库都已经达到了一个功能完满的状态，开发中在技术选型的时候，可以根据自己的需求进行选择。每一种组件库在组件设计选择上，不尽相同，但是最终的组件总数上，都差不多。

三、组件推荐

每一种组件库，都拥有比较独特两眼的组件，大家可以根据自己需求选择，或者根据实际情况自己自定义相关组件也更方便些。

1、iView - Split 面板分割

对于展示的内容做分割，并且可以通过拖动的方式修改分割。

组件链接：https://www.iviewui.com/components/split；

2、HeyUI - DateFullRangePicker 超级日期范围控件

超级日期范围控件算是一个比较实用的功能，基本满足日期范围选择的所有需求。

组件链接：https://www.heyui.top/component/data/plugin/datefullrange；

3、Element - Calendar 日历

基础日历的展示

组件链接：https://element.eleme.io/#/zh-CN/component/calendar；

4、HeyUI - TreePicker 树选择器

通过Tree模式的数据，选择数据。

组件链接：https://www.heyui.top/component/plugin/treepicker；

5、Ant Design Vue - TreeSelect 树选择器

通过Tree模式的数据，选择数据（说实话，跟HeyUI的有点差距）。

组件链接：https://vue.ant.design/components/tree-select/；

6、HeyUI - CategoryPicker 联动选择器

选择联动关联的信息（这个组件看到的有点晚，唉，下次一定要用）。

组件链接：https://www.heyui.top/component/other/categorypicker；

7、Element - Image 图片

继承图片展示的所有需求（个人感觉有些鸡肋）。

组件链接：https://element.eleme.io/#/zh-CN/component/image

8、HeyUI - ImagePreview 图片预览

图片预览功能以及图片列表展示（这个有点意思哈）。

组件链接：https://www.heyui.top/component/view/imagepreview；

9、HeyUI - TextEllipsis 超出文本省略

超出多行文本省略功能。（场景比较少，需要用到时手动即可搞定）

组件链接：https://www.heyui.top/component/other/textellipsis；

10、HeyUI - Clipboard 复制剪切板

复制剪切板集成（这个目前到还没用到）。

组件链接：https://www.heyui.top/component/other/clipboard；

四、总结

因为该篇文章引于HeyUI作者，所以最初看到原文的时候感觉有那么一点点强推的意思哈，但是对比之后发现，HeyUI确实有它的独到之处，

不可否认，Vue项目开发中用到的UI组件库最多的还是Element-UI以及Ant Design，特别还通用于React，当然了，也可能是我孤陋寡闻了，大家还是根据自己实际需要选择吧。

2019年 Vue 组件库大评测 Element, iView, HeyUI, Ant Design Vuemy.oschina.net