VUE组件库Element的简单使用

Element的简单使用

部署工作

先创建个vue项目

先准备vue环境哈
环境弄好了在目标路径打开命令行

在输入vue ui，打开项目管理器

创建个vue项目

安装ElementUI组件库（在当前工程目录下）

（此流程在vscode中演示）

右键项目文件夹，在集成终端中打开

执行以下命令：

install [email protected]

然后我们就会发现在项目文件夹中有个文件夹node-module,里面有个文件夹element-ui。
这个就代表已经安装成功了~

引入ElementUI的组件库

我们先看官方文档：
完整引入
在 main.js 中写入以下内容：

import Vue from'vue';import ElementUI from'element-ui';import'element-ui/lib/theme-chalk/index.css';import App from'./App.vue';

Vue.use(ElementUI);newVue({el:'#app',render:h=>h(App)});

反正官方文档是这么说的，但是如果我们在创建vue项目的时候勾选了一些其他的功能，比如说我选的就是route功能：

那我相较于官方文档还要多一行，所以大伙自己调整就行

然后我们可以在views文件下下面新建个element文件夹专门存储组件

然后再在这个文件夹里面新建一个vue文件

在这个vue文件里搞一个vue文件的基本结构

<template><div></div></template><script>exportdefault{}</script><style></style>

这是一个使用Vue.js框架编写的简单组件结构。这个结构包含三个部分：

1. <template>：这个部分定义了组件的HTML结构。
2. <script>：这个部分包含了组件的JavaScript逻辑。export default {}表示导出一个默认的Vue组件对象。
3. <style>：这个部分定义了组件的CSS样式。

然后启动项目：

我们会发现初始界面仍然是App.vue的界面,

我们还需要作对App.vue文件做出一些更改:
原来的是:

把之前的注释掉,再在下面新建一个script标签:

再在注释的地方新建一个新的标签:
当新建这个标签的时候,下面script标签就会自己出现一堆东西

现在就已经改好啦,界面就是白白的了,因为我们还没加入任何的组件

开始使用组件

Button 按钮组件

然后就试试最简单的按钮组件
先用按钮试试
打开https://element.eleme.cn/#/zh-CN/component/button
复制官网的这一坨

<el-row><el-button>默认按钮</el-button><el-buttontype="primary">主要按钮</el-button><el-buttontype="success">成功按钮</el-button><el-buttontype="info">信息按钮</el-button><el-buttontype="warning">警告按钮</el-button><el-buttontype="danger">危险按钮</el-button></el-row>

复制到咱们之前的那个ElementView.view文件中的template标签中

完整代码如下:

<template><div><el-row><el-button>默认按钮</el-button><el-buttontype="primary">主要按钮</el-button><el-buttontype="success">成功按钮</el-button><el-buttontype="info">信息按钮</el-button><el-buttontype="warning">警告按钮</el-button><el-buttontype="danger">危险按钮</el-button></el-row></div></template><script>exportdefault{};</script><style></style>

Table 表格组件

官方文档: https://element.eleme.cn/#/zh-CN/component/table
先以这个为例:

官方文档中提供的代码如下:

<template><el-table:data="tableData"borderstyle="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table></template><script>exportdefault{data(){return{tableData:[{date:'2016-05-02',name:'王小虎',address:'上海市普陀区金沙江路 1518 弄'},{date:'2016-05-04',name:'王小虎',address:'上海市普陀区金沙江路 1517 弄'},{date:'2016-05-01',name:'王小虎',address:'上海市普陀区金沙江路 1519 弄'},{date:'2016-05-03',name:'王小虎',address:'上海市普陀区金沙江路 1516 弄'}]}}}</script>

那我们就先把template标签中el-table标签中的代码(注意不包括template标签)复制下来,放进我们之前新建的ElementView.vue文件中去:

加入之后就是这样了,现在没得数据

然后我们再把下面一坨也复制过来(这个表格就需要复制script的部分,而上面的按钮那个就不需要)

数据就来了!

总代码如下:

<template><div><el-row><el-button>默认按钮</el-button><el-buttontype="primary">主要按钮</el-button><el-buttontype="success">成功按钮</el-button><el-buttontype="info">信息按钮</el-button><el-buttontype="warning">警告按钮</el-button><el-buttontype="danger">危险按钮</el-button></el-row><br/><br/><br/><!-- 下面是表格 --><el-table:data="tableData"borderstyle="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table></div></template><script>exportdefault{data(){return{tableData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄",},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄",},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄",},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄",},],};},};</script><style></style>

Pagination 分页组件

页面的插入

就长这样👇

我们以这个为例:

官方代码如下:

<el-paginationbackgroundlayout="prev, pager, next":total="1000"></el-pagination>

我们直接复制到vue文件里面去:
现在就长这样:

接下来我们看看官方文档中的Attributes,了解下每个属性都是干嘛的:
在这个分页组件中只涉及到了如下的属性,以及它们的功能👇
参数说明类型可选值默认值background是否为分页按钮添加背景色boolean—falsetotal总条目数number——layout组件布局，子组件名用逗号分隔Stringsizes, prev, pager, next, jumper, ->, total, slot‘prev, pager, next, jumper, ->, total’
前两个非常容易看懂,那么这个layout的可选值都长啥样子呢?
我们把这些可选值都塞进layout里面去:

页面现在是这样了

说明!对应如图

如果把这些个可选值的顺序改变,那么这些小部件的顺序也会相应改变

event的触发

官方文档:

我们主要研究前两个事件
那怎么研究呢?咱看看官方文档中的"附加功能":
这个里面就有说这两个功能的使用演示

我们主要关注这两行:

这两行就相当于是事件监听,双引号中的handleSizeChange和handleCurrentChange就是事件监听所触发的函数,
我们先在el-pagination中插入这两个事件监听:

既然是事件监听,那么我们还要写所触发的函数
接下来操作script:
添加methods,里面写所触发的函数:

methods:{handleSizeChange:function(val){alert("每页记录数发生变化"+ val);},handleCurrentChange:function(val){alert("页码发生变化"+ val);},},

可见这俩的参数都是数字,所以我们都设置一个val作为传入参数

测试handleSizeChange方法:

测试handleCurrentChange方法:

Dialog 对话框

就长这样,蹦出来个窗口:

官方代码:

<!-- Table --><el-buttontype="text"@click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button><el-dialogtitle="收货地址":visible.sync="dialogTableVisible"><el-table:data="gridData"><el-table-columnproperty="date"label="日期"width="150"></el-table-column><el-table-columnproperty="name"label="姓名"width="200"></el-table-column><el-table-columnproperty="address"label="地址"></el-table-column></el-table></el-dialog>

再把下面这坨复制进去

gridData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄",},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄",},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄",},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄",},],dialogTableVisible:false,

完整代码如下:

<template><div><!-- Table --><el-buttontype="text"@click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button><el-dialogtitle="收货地址":visible.sync="dialogTableVisible"><el-table:data="gridData"><el-table-columnproperty="date"label="日期"width="150"></el-table-column><el-table-columnproperty="name"label="姓名"width="200"></el-table-column><el-table-columnproperty="address"label="地址"></el-table-column></el-table></el-dialog></div></template><script>exportdefault{data(){return{gridData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄",},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄",},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄",},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄",},],dialogTableVisible:false,};},methods:{},};</script><style></style>

Form 表单

就长这样（官方图：典型表单）:

我们可以结合刚才写的那个对话框，就是点击之后弹出对话框，里面就是个表单。
就用典型表单做演示罢：

怎么知道复制过来的标签的各个属性都是干嘛的?

我们以表格那个为例
在对应的官方文档中,滑到最底下:

Table-column Attributes就是介绍每个属性都是干嘛用的