element

#element| 来源: 网络整理| 查看: 265

一、ElementUI

1、简介：是'饿了么'公司推出的基于Vue2的组件库

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原型上注册外部对象二、图像组件 //1.src属性：图像的地址，绑定变量用来指定图片的地址，通常需要使用require来拉取图片 //2.fit属性：确定图片如何适应到容器框（'fill', 'contain', 'cover', 'none', 'scale-down'） //3.lazy属性：图片懒加载（按需加载）三、导航菜单（NavMenu） 1、导航方向：通过mode属性设置 2、菜单项： //菜单项 //标题文本 //文本前的图标在线教材 //子菜单项出版图书教案管理教材管理 //disabled属性：表示该菜单项不可用三、上传组件：Upload 将图书图片拖到此处，或点击上传只能上传jpg/png文件，且不超过2M //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的上传组件将图片上传到服务器并保存到数据库中

（2）在el-table控件中将上传的图片显示出来

实现过程：

（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的分页组件： //1.size-change事件：每页显示的记录数发生改变时触发，会自动给事件处理函数传递一个参数，参数值是新的每页显示的记录数 //2.current-change事件：当前的页码发生改变时触发，会自动给事件处理函数传递一个参数，参数值是新的页码 //3.current-page属性：当前页的页码 //4.page-sizes属性：每页显示的记录数的列表，属性值是一个数组 //5.page-size属性：当前每页显示的记录数，属性值是一个数字 //6.layout属性：分页组件的布局 //7.total属性：总记录数

【本文地址】

公司简介

联系我们