ElementUI，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
是基于Vue的一个UI框架，该框架基于Vue开发了很多相关组件，方便我们快速开发页面。
饿了么前端团队基于Vue进行开发并开源，提供了封装好的组件。内部封装了HTML+CSS+JS。
方式一：CDN引入
CDN在线引入时需要锁定版本
炳汉的独白
<!-- 引入样式 -->
<link rel="stylesheet"
href="https://unpkg.com/browse/element-ui@2.15.1/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui@2.15.1/lib/index.js"></script>
方式二：下载本地
<!-- 引入 elementUI 样式 -->
<link rel="stylesheet" href="./element-ui-2.13.0/lib/theme-chalk/index.css">
<!-- 引入elementUI 组件库 -->
<script src="./element-ui-2.13.0/lib/index.js"></script>
说明：用于主动操作后的反馈提示
常用参数介绍：
| message | 消息文字 | string/VNode | - | - |
|---|---|---|---|---|
| type | 主题 | string | success/warning/info/error | info |
| showClose | 是否显示关闭按钮 | boolean | - | false |
| center | 文字是否居中 | boolean | - | false |
| duration | 显示时间，毫秒，设置为0则不会自动关闭 | number | - | 3000 |
// 消息弹框
this.$message({
message: '恭喜你，这是一条成功消息',
type: 'success'
});
this.$message.error('错了哦，这是一条错误消息');
// 确定取消弹框
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
// 带输入的弹框
this.$prompt('请输入邮箱', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
inputErrorMessage: '邮箱格式不正确'
}).then(({ value }) => {
this.$message({
type: 'success',
message: '你的邮箱是: ' + value
});
}).catch(() => {
this.$message({
type: 'info',
message: '取消输入'
});
});
说明：用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
1）el-table元素中
data表示绑定的表格数据
stripe 隔行变色
border 带边框的表格
2）el-table-column中
prop属性来对应对象中的属性值
label属性来定义表格的列名
width属性来定义列宽
type设置 selection 则显示多选
@selection-change="handleSelectionChange"
3）修改删除事件参数：
scope.$index当前行索引
scope.row当前行对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>elementui 的入门案例</title>
<!-- 引入样式 -->
<link rel="stylesheet" type="text/css"
href="css/elementui.css">
<!-- 引入组件库 -->
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/elementui.js"></script>
</head>
<body>
<div id="app">
<el-table
:data="list"
stripe
style="width: 100%">
<el-table-column
prop="id"
label="编号"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="sex"
label="性别">
</el-table-column>
</el-table>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
list:[{'id':1001,'name':'张飞1','sex':1},{'id':1002,'name':'张飞2','sex':2},{'id':1003,'name':'张飞3','sex':3}]
},
methods:{
}
});
</script>
</body>
</html>
说明：当页面数据量过多时，使用分页分解数据。
属性说明：
layout 表示需要显示的内容，用逗号分隔，布局元素会依次显示
total表示总条目数
prev 上一页
next 下一页
pager表示页码列表
jumper表示跳页元素
sizes 用于设置每页显示的页码数量
prev-text 替代图标显示的上一页文字
next-text替代图标显示的下一页文字
事件说明：
size-change页码大小发生改变时触发
current-change当前页变动时候触发
<el-pagination layout="prev,pager,next" :total="total"></el-pagination>
说明：在保留当前页面状态的情况下，告知用户并承载相关操作。
参数说明：
title 对话框标题
width 对话框宽度
fullscreen 是否全屏显示，默认false
:visible.sync="dialogVisible" 是否显示对话框，根据boolean值显示
事件说明：
:before-close="handleClose" 关闭对话框之前触发
<div id="app">
<el-button @click="showDialog()">打开对话框</el-button>
<el-dialog title="测试" :visible.sync="dialogFormVisiable">
<div>对话框内容。。。</div>
</el-dialog>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
dialogFormVisiable:false
},
methods:{
showDialog() {
this.dialogFormVisiable = true;
}
}
});
</script>
<div id="app">
<el-upload
class="avatar-uploader"
action="upload"
name="filename"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="flag" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
imageUrl:'',
flag:false
},
methods:{
handleAvatarSuccess(res, filename) {
console.log(res)
this.flag = true;
this.imageUrl = res.url;
},
beforeAvatarUpload(filename) {
const isJPG = filename.type === 'image/jpeg';
const isLt2M = filename.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
}
}
});
</script>