介绍
网站快速成型工具，是饿了么公司前端开发团队提供的一套基于Vue的网站组件库
使用Element前提必须要有Vue
官网：https://element.eleme.cn/#/zh-CN
快速入门
- 引入资料中Element样式文件夹
- 引入Vue核心js文件
- 在html中引入vue.js
- 在html中引入Element核心js文件
- 编写按钮标签
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>快速入门</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<!-- 引入vue index.js依赖vue-->
<script src="../js/vue.js"></script>
<!-- 引入组件库 -->
<script src="../element-ui/lib/index.js"></script>
</head>
<body>
<div id="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>
<el-row>
<el-button plain>朴素按钮</el-button>
<el-button type="primary" plain>主要按钮</el-button>
<el-button type="success" plain>成功按钮</el-button>
<el-button type="info" plain>信息按钮</el-button>
<el-button type="warning" plain>警告按钮</el-button>
<el-button type="danger" plain>危险按钮</el-button>
</el-row>
<el-row>
<el-button round>圆角按钮</el-button>
<el-button type="primary" round>主要按钮</el-button>
<el-button type="success" round>成功按钮</el-button>
<el-button type="info" round>信息按钮</el-button>
<el-button type="warning" round>警告按钮</el-button>
<el-button type="danger" round>危险按钮</el-button>
</el-row>
<el-row>
<el-button icon="el-icon-search" circle></el-button>
<el-button type="primary" icon="el-icon-edit" circle></el-button>
<el-button type="success" icon="el-icon-check" circle></el-button>
<el-button type="info" icon="el-icon-message" circle></el-button>
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
<el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>
</div>
</body>
<script>
new Vue({
el:"#div"
});
</script>
</html>
组件
基础布局
就是每一行总共有24个分栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础布局</title>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<style>
.el-row {
/* 行距为20px */
margin-bottom: 20px;
}
.bg-purple-dark {
background: red;
}
.bg-purple {
background: blue;
}
.bg-purple-light {
background: green;
}
.grid-content {
/* 边框圆润度 */
border-radius: 4px;
/* 行高为36px */
min-height: 36px;
}
</style>
</head>
<body>
<div id="div">
<el-row>
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
<el-row>
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
</div>
</body>
<script>
new Vue({
el:"#div"
});
</script>
</html>
容器布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>容器布局</title>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>
</head>
<body>
<div id="div">
</div>
</body>
<script>
new Vue({
el:"#div"
});
</script>
</html>
表单组件(掌握)
Form表单
由输入框、下拉列表、单选框、多选框等控件组成，用以收集、校验、提交数据。
在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker
自带校验的表单组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单组件</title>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
</head>
<body>
<div id="div">
<!-- Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可 -->
<!--
1.el-form 标签表示form表单标签
2.:rules="rules" 全称写法 v-bind:rules="rules" 属性值rules是数据模型中。
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
],
date1: [
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
],
date2: [
{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }
],
type: [
{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
],
resource: [
{ required: true, message: '请选择活动资源', trigger: 'change' }
],
desc: [
{ required: true, message: '请填写活动形式', trigger: 'blur' }
]
}
-->
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<!--
通过el-form-item属性prop="name"来设置需要校验的字段，prop的属性值name就是下面数据模型中rules的key:
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
]
....
}
label="活动名称" 就是输入框前面显示的内容
-->
<el-form-item label="用户名" prop="name">
<!--
v-model="ruleForm.name" 双向数据绑定。视图改变。数据模型改变。数据模型改变，视图改变。
v-model="ruleForm.name" 数据模型中有ruleForm，并且在ruleForm中有name:
ruleForm: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
-->
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间" required>
<el-col :span="11">
<el-form-item prop="date1">
<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-form-item prop="date2">
<el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="即时配送" prop="delivery">
<el-switch v-model="ruleForm.delivery"></el-switch>
</el-form-item>
<el-form-item label="活动性质" prop="type">
<el-checkbox-group v-model="ruleForm.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式" prop="desc">
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
</el-form-item>
<el-form-item>
<!--
@click="submitForm('ruleForm')" : 给当前按钮标签绑定一个单击事件，单击 立即创建 按钮的时候就会调用submitForm函数
ruleForm代表整个form表单进行传递到该函数中
-->
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</body>
<script>
new Vue({
el:"#div",
data() {
return {
ruleForm: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
rules: {
name: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 7, max: 10, message: '长度在 7 到 10 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
],
date1: [
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
],
date2: [
{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }
],
type: [
{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
],
resource: [
{ required: true, message: '请选择活动资源', trigger: 'change' }
],
desc: [
{ required: true, message: '请填写活动形式', trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {//formName=ruleForm 表示整个表单
this.$refs[formName].validate((valid) => {
//TODO:这里表示对form表单进行验证，如果验证通过，那么valid的值是true,校验失败是valid的值是false
if (valid) {
//TODO:实际开发中我们需要在这里书写axios异步请求代码，将数据传递到后台服务器。然后接收后台响应数据
alert('submit!');
//省略了return true;可以提交表单 默认是true
} else {
//校验失败是valid的值是false
console.log('error submit!!');
//阻止表单提交
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
});
</script>
</html>
表格组件
Table表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格组件</title>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
</head>
<body>
<div id="div">
<!-- 当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，
用label属性来定义表格的列名。可以使用width属性来定义列宽。 -->
<!--
1.:data="tableData" 通过data属性将数据模型的数据tableData注入到表格中：
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 弄'
}]
-->
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName"
>
<!-- 可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class，
表明该行处于某种状态。 -->
<!--
2.在el-table-column中用prop属性来对应对象中的键名即可填入数据，
3. 用label属性来定义表格的列名
-->
<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>
</body>
<script>
new Vue({
el:"#div",
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 弄'
}]
}
},
methods: {
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
}
}
});
</script>
</html>
导航栏组件
NavMenu 导航菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>顶部导航栏</title>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
</head>
<body>
<div id="div">
<!--
1.导航菜单默认为垂直模式，通过mode属性可以使导航菜单变更为水平模式。
mode="vertical" 垂直模式
mode="horizontal" 水平
2.background-color：菜单的背景色
3.text-color:菜单的文字颜色
4.active-text-color:当前激活菜单的文字颜色 .就是你当前在菜单位置上显示的颜色
-->
<el-menu
:default-active="activeIndex2"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="1">处理中心</el-menu-item>
<!-- 5.另外，在菜单中通过submenu组件可以生成二级菜单 -->
<el-submenu index="2">
<template slot="title">Java</template>
<el-menu-item index="2-1">javame</el-menu-item>
<el-menu-item index="2-2">javase</el-menu-item>
<!-- <el-menu-item index="2-3">c++</el-menu-item> -->
<el-submenu index="2-4">
<template slot="title">javaee</template>
<el-menu-item index="2-4-1">前端</el-menu-item>
<el-menu-item index="2-4-2">web</el-menu-item>
<el-menu-item index="2-4-3">框架</el-menu-item>
</el-submenu>
</el-submenu>
<!-- disabled 禁用 -->
<el-menu-item index="3" disabled>消息中心</el-menu-item>
<!-- _blank 在新的页面；_self 在当前页面打开 -->
<el-menu-item index="4"><a href="https://www.ele.me" target="_self">订单管理</a></el-menu-item>
</el-menu>
</div>
</body>
<script>
new Vue({
el:"#div",
data() {
return {
activeIndex: '1',
activeIndex2: '1'
};
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
}
}
});
</script>
</html>
综合案例
学生列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生列表</title>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<style>
.el-header{
background-color: #545c64;
}
.header-img{
width: 100px;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="div">
<el-container>
<!-- 头部 -->
<el-header class="el-header">
<el-container>
<div>
<!-- 图片 -->
<el-image src="img/export.png" class="header-img"></el-image>
</div>
<!-- el-menu 导航栏菜单 -->
<el-menu
:default-active="activeIndex2"
mode="horizontal"
@select="handleSelect"
background-color="#545c64"
text-color="white"
active-text-color="#ffd04b"
style="margin-left: auto;">
<el-menu-item index="1">处理中心</el-menu-item>
<!-- 二级菜单 -->
<el-submenu index="2">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
</el-submenu>
<el-menu-item index="3"><a href="学生列表.html" target="_self">首页</a></el-menu-item>
</el-menu>
</el-container>
</el-header>
<el-container style="height: 580px; border: 1px solid #eee">
<!-- 侧边栏区域 -->
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<!--
:default-openeds="['1']" 页面加载默认展开的菜单 1表示el-submenu index="1" 的index的值
-->
<el-menu :default-openeds="['1']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-menu"></i>学工部</template>
<el-menu-item-group>
<el-menu-item index="1-1"><i class="el-icon-help"></i>在校学生管理</el-menu-item>
<el-menu-item index="1-2"><i class="el-icon-help"></i>学生升级/留级</el-menu-item>
<el-menu-item index="1-3"><i class="el-icon-help"></i>学生就业情况</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>咨询部</template>
<el-menu-item-group>
<el-menu-item index="2-1"><i class="el-icon-help"></i>意向学生管理</el-menu-item>
<el-menu-item index="2-2"><i class="el-icon-help"></i>未报名学生管理</el-menu-item>
<el-menu-item index="2-3"><i class="el-icon-help"></i>已报名学生管理</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-menu"></i>教研部</template>
<el-menu-item-group>
<el-menu-item index="3-1"><i class="el-icon-help"></i>已有课程管理</el-menu-item>
<el-menu-item index="3-2"><i class="el-icon-help"></i>正在研发课程管理</el-menu-item>
<el-menu-item index="3-3"><i class="el-icon-help"></i>新技术课程管理</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<!-- 主区域 -->
<el-container>
<el-main>
<b style="color: red;font-size: 20px;">学生列表</b>
<div style="float:right">
<el-button type="primary">添加学生</el-button>
</div>
<!--
el-table :表格。通过属性:data="tableData" 向表格中注入数据
-->
<el-table :data="tableData" style="width: 100%;"
>
<!-- label="日期" 表示列名 -->
<el-table-column prop="date" label="日期" >
</el-table-column>
<el-table-column prop="name" label="姓名" >
</el-table-column>
<el-table-column prop="address" label="地址" >
</el-table-column>
<el-table-column prop="age" label="年龄" >
</el-table-column>
<el-table-column
label="操作"
width="180">
<el-button type="warning">编辑</el-button>
<el-button type="danger">删除</el-button>
</el-table-column>
</el-table>
</el-main>
</el-container>
</el-container>
</el-container>
</div>
</body>
<script>
new Vue({
el:"#div",
data:{
tableData:[
{
date:"2088-08-08",
name:"张三",
address:"北京市昌平区",
age:18
},{
date:"2088-08-08",
name:"李四",
address:"北京市昌平区",
age:18
},{
date:"2088-08-08",
name:"王五",
address:"北京市昌平区",
age:18
},
]
}
});
</script>
</html>
扫一扫
363
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
