Element的概念
Element：是饿了么公司前端开发团队提供的一套Vue的网站组件库，用于快速构建网页。
组件：是组成网页的部件。例如：超链接、按钮、图片、表格等等。
Element官网：https://element.eleme.cn/#/zh-CNListener
首先是Element的入门学习代码：
1.引入Element的css、js文件和Vue.js
<script src="vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
2.创建Vue核心程序
此处的el是elemnet的简写。后面的值必须谁#加div中的id值
而return中的必须是键值对对象。
new Vue({
el: "#app",
data() {
return {}
}
}
3. 可直接到Element官网复制代码
接下来将以下图片为项目原型做的一个练习小案例
代码如下：
各种组件的代码主要在Element官网可找到：
注意点：Element提供了很多组件。可根据要求在其中寻找
思路分享：
首先拿到项目原型进行分析，应该分析可能用到哪些组件。接着开始在vs中创建一个html文件
正文内容：
1.导入Vue的js文件
2.[在Element的官网：](https://element.eleme.cn/#/zh-CN/component/installation)
在Element官网中，找到引入样式和引入组件库，只需地址修改成自己index.js和index.css的地址就行
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- //添加搜索栏 -->
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="菜品名称">
<el-input v-model="formInline.user" placeholder="菜品名称"></el-input>
</el-form-item>
<el-form-item label="菜品分类">
<el-select v-model="formInline.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="售卖状态">
<el-select v-model="formInline.status" placeholder="售卖状态">
<el-option label="启用" value="shanghai"></el-option>
<el-option label="禁用" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-button type="primary">搜索</el-button>
<br>
<!-- 添加批量删除按钮，新建菜品按钮 -->
<el-button type="danger">批量删除</el-button>
<el-button type="primary" @click="dialogFormVisible = true">新建菜品</el-button>
<!-- 3.表数据 -->
<template>
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column prop="name" label="菜品名称" name=center>
</el-table-column>
<el-table-column label="图片">
<!-- 槽 格子
scope.row 代表当前行数据
-->
<template slot-scope="scope">
<el-popover placement="top-start" title="" trigger="hover">
<img :src="scope.row.image" alt="" style="width: 150px;height: 150px">
<img slot="reference" :src="scope.row.image" style="width: 30px;height: 30px">
</el-popover>
</template>
</el-table-column>
<el-table-column prop="description" label="菜品描述">
</el-table-column>
<el-table-column prop="category" label="菜品分类">
</el-table-column>
<el-table-column prop="price" label="菜品价格">
</el-table-column>
<el-table-column label="售卖状态">
<!-- 将1或0改成启用或禁用。但此处无法使用三元运算符,只能通过template中的slot-scope=“scope” {{scope.row.status==1?'启用:禁用'}} -->
<template slot-scope="scope">
{{scope.row.status ==1?'启用':'禁用'}}
</template>
</el-table-column>
<el-table-column prop="updateTime" label="更新时间">
</el-table-column>
<el-table-column label="操作" width="420">
<el-row>
<el-button type="primary" plain>修改</el-button>
<el-button type="success" plain>停售</el-button>
<el-button type="danger" plain>删除</el-button>
</el-row>
</el-table-column>
</el-table>
</template>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="5"
layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
<!-- 新建菜品名称对话框 -->
<!-- 并同新建菜单按钮绑定事件 -->
<el-dialog title="新键菜品" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="菜品名称" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="菜品分类" :label-width="formLabelWidth">
<el-select v-model="form.classify" placeholder="请选择菜品分类">
<el-option label="热菜" value="shanghai"></el-option>
<el-option label="凉菜" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="菜品价格" :label-width="formLabelWidth">
<el-input v-model="form.price" placeholder="请输入菜品价格" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="菜品图片" :label-width="formLabelWidth">
<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false" :on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item label="菜品描述" :label-width="formLabelWidth">
<el-input type="textarea" placeholder="请输入菜品描述..." show-word-limit maxlength="300"
v-model="form.desc">
</el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
</div>
</el-dialog>
</div>
<!-- 1.导入vue.js文件 -->
<script src="./vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="./element-ui/lib/index.js"></script>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
<!-- 2.创建vue的核心对象 -->
<script>
new Vue({
el: "#app",
data() {
return {
imageUrl: '',
formLabelWidth: '120px',
dialogFormVisible: false, //控制对话框是否可见
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
total: 100,
currentPage: 1,
formInline: {
user: '',
region: ''
},
tableData: [{
"id": 1,
"name": "糖醋里脊",
"image": "https://tse1-mm.cn.bing.net/th/id/R-C.81bb23caf379342b46fbe504749a8b80?rik=evfxrHcBFkRtcA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50095%2f2639.jpg_wh860.jpg&ehk=%2fkgtpa0R7miVzbMiQMtWyTLvWtgk3roGF8t93LH67T4%3d&risl=&pid=ImgRaw&r=0",
"description": "aliqua",
"category": "热菜",
"price": 35282863,
"status": "1",
"updateTime": "1970-07-13T17:31:26.805Z",
"createTime": "1943-01-15T07:17:19.591Z"
},
{
"id": 37,
"name": "糖醋里脊",
"image": "https://tse1-mm.cn.bing.net/th/id/R-C.81bb23caf379342b46fbe504749a8b80?rik=evfxrHcBFkRtcA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50095%2f2639.jpg_wh860.jpg&ehk=%2fkgtpa0R7miVzbMiQMtWyTLvWtgk3roGF8t93LH67T4%3d&risl=&pid=ImgRaw&r=0",
"description": "qui consectetur",
"category": "凉菜",
"price": 75545494,
"status": "1",
"updateTime": "1984-01-21T20:59:05.255Z",
"createTime": "1987-01-28T14:31:11.798Z"
},
{
"id": 72,
"name": "糖醋里脊",
"image": "https://tse1-mm.cn.bing.net/th/id/R-C.81bb23caf379342b46fbe504749a8b80?rik=evfxrHcBFkRtcA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50095%2f2639.jpg_wh860.jpg&ehk=%2fkgtpa0R7miVzbMiQMtWyTLvWtgk3roGF8t93LH67T4%3d&risl=&pid=ImgRaw&r=0",
"description": "velit veniam",
"category": "热菜",
"price": 75328514,
"status": "0",
"updateTime": "2019-02-20T16:12:50.569Z",
"createTime": "2020-11-09T10:05:57.696Z"
},
{
"id": 35,
"name": "蒜香排骨",
"image": "https://tse1-mm.cn.bing.net/th/id/R-C.81bb23caf379342b46fbe504749a8b80?rik=evfxrHcBFkRtcA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50095%2f2639.jpg_wh860.jpg&ehk=%2fkgtpa0R7miVzbMiQMtWyTLvWtgk3roGF8t93LH67T4%3d&risl=&pid=ImgRaw&r=0",
"description": "pariatur",
"category": "热菜",
"price": -29339719,
"status": "1",
"updateTime": "1953-12-11T14:26:26.271Z",
"createTime": "2001-05-30T13:59:10.475Z"
}
],
multipleSelection: []
}
},
methods: {
//分页
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
},
//搜索表单
onSubmit() {
console.log('submit!');
},
//图片上传
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
},
//表格
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
}
}
})
</script>
</body>
</html>