element-ui组件的使用，导航菜单（NavMenu）组件、分页组件的使用
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
一、ElementUI
2、使用方法具体可见官网
https://element.eleme.cn/#/zh-CN/component/installation
1在vue项目中安装npm install element-ui
2在main.js文件中进行全局的配置
import ElementUI from 'element-ui' ;//导入element-ui库
import 'element-ui/lib/theme-chalk/index.css' ;//导入element-ui的样式文件
Vue.use(ElementUI);//在vue原型上注册外部对象二、图像组件
<el-image
style="width: 100px; height: 100px"
:src="url"
:fit="fit">
</el-image>
//1.src属性图像的地址绑定变量用来指定图片的地址通常需要使用require来拉取图片
//2.fit属性确定图片如何适应到容器框'fill', 'contain', 'cover', 'none', 'scale-down'
//3.lazy属性图片懒加载按需加载三、导航菜单NavMenu
1、导航方向通过mode属性设置
2、菜单项
<el-menu mode="方向" background-color="背景色" text-color="文本颜色"
default-active="默认打开的菜单"
active-text-color="活动的菜单的文本的颜色">
<el-submenu index="1"> //菜单项
<template slot="title"> //标题文本
<i class="el-icon-notebook-2"></i> //文本前的图标
<span>在线教材</span>
</template>
<el-menu-item index="1-1"> //子菜单项
<router-link to="/books" class="link">出版图书</router-link>
</el-menu-item>
<el-menu-item index="1-2">教案管理</el-menu-item>
<el-menu-item index="1-3">教材管理</el-menu-item>
</el-submenu>
</el-menu>
//disabled属性表示该菜单项不可用三、上传组件Upload
<el-upload
class="avatar-uploader"
style="margin-left: 30px;"
drag
action="http://localhost:8089/books/upload"
:show-file-list="false"
:on-change="handlePreview"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
multiple >
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将图书图片拖到此处或<em>点击上传</em>
</div>
<div class="el-upload__tip" slot="tip">
只能上传jpg/png文件且不超过2M
</div>
</el-upload>
//1.drag属性表示是否启用拖拽上传
//2.action属性上传服务器的地址
//3.show-file-list 是否显示已上传文件列表(true/false)
//4.data上传时是否需要附带额外的参数
//5.multiple是否可以上传多个文件
//6.on-change事件当上传文件的内容发生改变时触发
//7.on-success事件当上传成功后触发
//8.before-upload事件在上传之前触发(通常用于检查上传文件的格式、大小)
对应的js处理代码
//before-upload事件的处理函数图片上传之前的验证
beforeAvatarUpload(file) {
const isJPG = (file.type === 'image/jpeg'||'image/png');
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
this.imageUrl = ''
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
this.imageUrl = ''
}
return isJPG && isLt2M;
},
//on-change事件的处理函数显示图片
handlePreview(file){
console.log('#####:',file)
this.imageUrl = URL.createObjectURL(file.raw)
},
//on-success事件触发的函数图片上传成功后
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
},
示例
1使用elementUI的上传组件将图片上传到服务器并保存到数据库中
1给数据库中的数据表增加一列image_url保存图片在服务器中存储路径
2在服务器端给BookModel增加一个属性imageUrl该属性映射的是数据表中的image_url列
3在前端组件中使用FormData对数据进行打包将表单控件的值和el-upload组件的值
A、在组件的data中增加变量uploadImage存放用户选择的文件信息
let formData = new FormData()
formData.append('bookName',this.form.bookName)
formData.append('bookAuthor',this.form.bookAuthor)
formData.append('publishTime',this.form.publishTime)
formData.append('bookPrice', this.form.bookPrice)
formData.append('uploadImage', this.uploadImage) B、将formData提交给服务器端的接口
4在后台接口中使用formidable模块来解析formData中的数据
5将上传到服务器端的图片在客户端的表格el-table中显示出来
四、分页组件
1、实现分页的方式
1服务器端分页通过底层的数据库来实现前端会频繁的和服务器交互客户端每次请求的是分页的数据而不是所有数据
2前端分页一次性从数据库中取出数据缓存起来然后对缓存中的数据进行分页处理
2、实现分页的要素
1总记录数
2每页显示的记录数
3需要的页数
4每页数据的起始索引
3、element-ui的分页组件
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
//1.size-change事件每页显示的记录数发生改变时触发会自动给事件处理函数传递一个参数参数值是新的每页显示的记录数
//2.current-change事件当前的页码发生改变时触发会自动给事件处理函数传递一个参数参数值是新的页码
//3.current-page属性当前页的页码
//4.page-sizes属性每页显示的记录数的列表属性值是一个数组
//5.page-size属性当前每页显示的记录数属性值是一个数字
//6.layout属性分页组件的布局
//7.total属性总记录数