Element的简单使用
部署工作
先创建个vue项目
先准备vue环境哈
环境弄好了在目标路径打开命令行
在输入vue ui,打开项目管理器
创建个vue项目
安装ElementUI组件库(在当前工程目录下)
(此流程在vscode中演示)
右键项目文件夹,在集成终端中打开
执行以下命令:
install element-ui@2.15.3npm
然后我们就会发现在项目文件夹中有个文件夹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);
new Vue({
el: '#app',
render: h => h(App)
});
反正官方文档是这么说的,但是如果我们在创建vue项目的时候勾选了一些其他的功能,比如说我选的就是route功能:
那我相较于官方文档还要多一行,所以大伙自己调整就行
然后我们可以在views文件下下面新建个element文件夹专门存储组件
然后再在这个文件夹里面新建一个vue文件
在这个vue文件里搞一个vue文件的基本结构
<template>
<div>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
这是一个使用Vue.js框架编写的简单组件结构。这个结构包含三个部分:
<template>
:这个部分定义了组件的HTML结构。<script>
:这个部分包含了组件的JavaScript逻辑。export default {}
表示导出一个默认的Vue组件对象。<style>
:这个部分定义了组件的CSS样式。
然后启动项目:
我们会发现初始界面仍然是App.vue的界面,
我们还需要作对App.vue文件做出一些更改:
原来的是:
把之前的注释掉,再在下面新建一个script标签:
再在注释的地方新建一个新的标签:
当新建这个标签的时候,下面script标签就会自己出现一堆东西
现在就已经改好啦,界面就是白白的了,因为我们还没加入任何的组件
开始使用组件
Button 按钮组件
然后就试试最简单的按钮组件
先用按钮试试
打开https://element.eleme.cn/#/zh-CN/component/button
复制官网的这一坨
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
复制到咱们之前的那个ElementView.view文件中的template标签中
完整代码如下:
<template>
<div>
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
</div>
</template>
<script>
export default {};
</script>
<style>
</style>
Table 表格组件
官方文档: https://element.eleme.cn/#/zh-CN/component/table
先以这个为例:
官方文档中提供的代码如下:
<template>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
<script>
export default {
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-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
<br /><br /><br />
<!-- 下面是表格 -->
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
</div>
</template>
<script>
export default {
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-pagination
background
layout="prev, pager, next"
:total="1000">
</el-pagination>
我们直接复制到vue文件里面去:
现在就长这样:
接下来我们看看官方文档中的Attributes,了解下每个属性都是干嘛的:
在这个分页组件中只涉及到了如下的属性,以及它们的功能👇
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
background | 是否为分页按钮添加背景色 | boolean | — | false |
total | 总条目数 | number | — | — |
layout | 组件布局,子组件名用逗号分隔 | String | sizes, 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-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
<el-table :data="gridData">
<el-table-column property="date" label="日期" width="150"></el-table-column>
<el-table-column property="name" label="姓名" width="200"></el-table-column>
<el-table-column property="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-button type="text" @click="dialogTableVisible = true"
>打开嵌套表格的 Dialog</el-button
>
<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
<el-table :data="gridData">
<el-table-column
property="date"
label="日期"
width="150"
></el-table-column>
<el-table-column
property="name"
label="姓名"
width="200"
></el-table-column>
<el-table-column property="address" label="地址"></el-table-column>
</el-table>
</el-dialog>
</div>
</template>
<script>
export default {
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就是介绍每个属性都是干嘛用的