element-ui 与 ant-design 技术选型 - 《前端 coding》

一、个性定制
二、组件
三、结论

- element-ui 写法template 模板
- ant-design vue jsx 写法
- 项目上手容易程度我觉得都差不多
- ui设计相对ant-design 更加漂亮也符合当前的项目风格

一、个性定制

都可以支持

- 支持更换主题色
- 支持国际化
- 支持按需引入

二、组件

1、Table组件

结合业务比较,需要表格列宽可以拖拽，当某列数据过长，要做对比查看时。

element-ui 列宽是可以拖拽
ant-design 列宽不能拖拽

ant-design vue版本的表格列宽不能拖拽，必须设置宽度，不然错位。锁定列时候，内容太多，表头容易留白。

相对比较，ant-design 列表场景覆盖率更高

table能够像antd react版本那样提供行数据拖拽排序的demo

https://www.jianshu.com/p/89b8ccd1eca0

2、form表单组件

都可以支持

- 支持动态校验规则
- 支持自定义校验
- 支持表单有三种布局
- 支持动态增减表单项
- 支持自定义表单控件


- element-ui form 场景相对没有 ant-design 丰富，
- 但是 element-ui api更简单容易上手，
- ant-design 相对会更偏向jsx,但是vue3.0 也开始提倡加入jsx

不考虑上手程度上，我更喜欢ant-design form组件

3、组件类型

基本、常规组件 二者都可以满足需求的。

但是ant-design 组件多且考虑到业务场景也更全面的。如多出Result 结果、Comment评论、Mentions提及等组件

三、结论

都可以支持

- 支持在vue-cli 3 中使用
- 现代浏览器和 IE9 及以上（需要 polyfills）。
- 支持服务端渲染。
- Electron

预编译样式

- element-ui 使用scss
- ant-design 使用less

开源的后台管理框架模板

- element-ui 有 vue-admin-template
- [https://github.com/PanJiaChen/vue-admin-template/blob/master/README-zh.md](https://note.youdao.com/)
- ant-design-vue 有vue-antd-admin
- [https://iczer.gitee.io/vue-antd-admin-docs/start/use.html](https://note.youdao.com/)

开发的时候二者可以互相借鉴的。

我个人会偏向ant-design,为了后面引入vue3.0开发做准备，考虑elment-ui被阿里收购了，是否在iview、element-ui、ant-design 最终还是一家独大的考虑。