ant-design-vue和element-ui

一、ant-design-vue是什么？

ant-design-vue是蚂蚁金服 Ant Design 官方唯一推荐的Vue版UI组件库，它其实是Ant Design的Vue实现，组件的风格与Ant Design保持同步，组件的html结构和css样式也保持一致。 用下来发现它的确称得上为数不多的完整的VUE组件库与开发方案集成项目。

1.引入库

现在从 yarn 或 npm 安装并引入 ant-design-vue。
npm：

npm install --save  ant-design-vue

yarn：

$ yarn add ant-design-vue

最后导入：

import Antd from 'ant-design-vue'

2.常见用法

1. 使用a-table表格时隐藏分页器
   :pagination="false" //分页器配置项
2. 使用a-table表格时给孩子重命名
   childrenColumnName=" "
3. 使用a-table表格时报错：Duplicate keys detected: ‘0’. This may cause an update error
   添加row-key属性：row-key=" "
4. a-table表格默认展开行
   使用defaultExpandAllRows不能直接生效，需要定义一个loading字段，在获取数据后设置loading = true,在标签中进行v-if判断，即： <a-table v-if="loading" defaultExpandAllRows></a-table>
5. 报错：TypeError: Invalid attempt to spread non-iterable instance
   翻译：类型错误：传播不可提交实例的尝试无效。
   原因：错误运用扩展运算符(…)
   注：对象中的扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中

更多内容见APIhttps://www.antdv.com/docs/vue/introduce-cn/

二、element-ui是什么？

Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架。

1.引入库

npm：

npm i element-ui -S

最后引入：

import ElementUI from 'element-ui';

2.快速上手

ElementUI的上手非常简单：

1. 找想要的样式组件
2. 复制代码到对应的.vue文件
3. 修改对应的数据

非组件样式使用
官方提供的样式中有一部分并非是组件样式，比如：字体图标、全局指令、全局事件等，这里简单说明下这类样式的使用方法

图标样式使用
官方提供了很多图标样式（链接），通过阅读文档可以发现：一般情况下，使用i标签，并将class属性设置成对应的图标名即可；而对于别的组件希望引入图标时（有icon属性的组件，例如el-button），设置icon属性为对应的图标名即可

指令样式使用
例如Loading加载（链接），其提供的是一个指令v-loading，而非一个组件，那么使用也很简单，因为已经注册了全局组件，直接调用就行了

事件样式使用
例如Message消息提示（链接），其提供是也不是组件，而是发送一个事件，那么使用时只需要参考文档发送的数据属性选项即可

文档读法
element-ui文档提供了很多示例代码，一般情况下我们直接拷下示例代码稍微看着改改数据之类的就够用了。但是在某些场景下，我们可能又需要使用到一些特殊的功能和属性，而这些功能属性一般在官方提供的组件中都已经内置了，所以我们可以直接先从文档中寻找查看是否有属性或者方法等能够满足我们的需求，从而避免重复造轮子。下面就来说明下文档里提供的属性、方法等如何阅读以及使用。

attribute读法
顾名思义，就是官方提供的属性，使用很简单，直接设置属性和对应的值就行了，直接拿el-input组件(链接)来说，例如其提供的Input Attributes里面有maxlength（最大输入长度，number型）和clearable（是否可清空，boolean型），那么：对于非boolean型的属性，需要直接设置值的内容；对于boolean型的属性，一般默认是false，而直接添加该属性，默认就是设置为true

slot读法
slot的使用和普通的slot用法没什么区别，直接在该组件当中定义一个标签，并设置该标签的slot属性即可，还是拿el-input组件举例，其Input slots下提供了prepend（输入框头部内容，只对 type=“text” 有效）

event读法
event就是提供的监听事件，直接使用v-on（简写@）绑定该event即可，例如el-input组件的Input Events下提供了change方法，并且看到回调参数里包括value，那么该事件将会传递这个参数

method读法
method就是该组件内置的方法，使用时可以通过ref属性调用

option读法
option一般是一些attribute的类型为object类型时，该attribute对象里的键值参考

子组件读法
很多提供的组件里都含有子组件，比如el-select下就有子组件el-option，那么使用时只需要将其嵌套在父组件，而对应子组件的attributes、slot等的使用方式也是一样的

---