Element组件
基于vue2.0的桌面端组件库
组件:超链接、按钮、图片、表格、分页条等
链接: Element链接
作用:用于组件优化页面
1.快速入门
- 安装ElementUi组件库(在当前项目中安装),在命令行执行 npm install element-ui@2.15.3
- 在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
文件命名最好使用驼峰命名
-
进入element官网,寻找想要的组件,然后将组件放到创建的vue文件中。
链接: https://element.eleme.cn/#/zh-CN
-
将ElementView.vue文件引入到App.vue
2.常见的组件
- table:
table组件除了需要对<template>
操作,还需要对<script>进行操作
在vue中,[ ]表示数组,{ }表示对象,表格的prop属性对应数组对象中的属性,label为标签
2.分页组件
进入element-ui官网找到代码复制粘贴即可
其中layout属性可以更改page
page事件
size-change,参数为每页条数,pageSize改变时触发。
current-change,参数为当前页,currentPage改变时触发
3.对话框组件:
4.对话框嵌套表单组件
总结:在对话框的基础上进行form表单的添加,因为需要传值,所以必须创建一个表单对象,并与标签进行绑定