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

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

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

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

一、组件库

1、Element-UI

官方网站：/#/zh-CN；

2、iView UI

官方网站：/；

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 面板分割

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

组件链接：/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，当然了，也可能是我孤陋寡闻了，大家还是根据自己实际需要选择吧。

Vue 组件库大评测 Element, iView, HeyUI, Ant Design Vue​