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