Vue组件库Element

Element组件

基于vue2.0的桌面端组件库
组件：超链接、按钮、图片、表格、分页条等
链接: Element链接
作用：用于组件优化页面

1.快速入门

1. 安装ElementUi组件库（在当前项目中安装），在命令行执行 npm install element-ui@2.15.3
2. 在main.js文件下引入文件
   import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
   

下载完成后，node_molules目录下会有一个element-ui组件
2. 在view下创建一个文件夹用于存放一个vue文件，该文件的作用是应用element-ui

文件命名最好使用驼峰命名

3. 进入element官网，寻找想要的组件，然后将组件放到创建的vue文件中。
   链接: https://element.eleme.cn/#/zh-CN
   

4. 将ElementView.vue文件引入到App.vue
   

2.常见的组件

5. table:
   table组件除了需要对<template>操作，还需要对<script>进行操作
   
   在vue中，[ ]表示数组，{ }表示对象，表格的prop属性对应数组对象中的属性，label为标签
   

2.分页组件

进入element-ui官网找到代码复制粘贴即可

其中layout属性可以更改page

page事件
size-change,参数为每页条数，pageSize改变时触发。
current-change,参数为当前页，currentPage改变时触发

3.对话框组件：

4.对话框嵌套表单组件

总结：在对话框的基础上进行form表单的添加，因为需要传值，所以必须创建一个表单对象，并与标签进行绑定