【element-ui组件】一.图像组件；二.导航菜单（NavMenu）；三.上传组件：Upload；四.分页组件

目录

一.图像组件

二.导航菜单（NavMenu）

1.导航方向：通过model属性来设置

2.菜单项：

三.上传组件：Upload

四.分页组件

1.实现分页的方式：

（1）服务器端分页：通过底层的数据库来实现，前端会频繁的和服务器交互，客户端每次请求的是分页的数据而不是所有数据

（2）前端分页：一次性从数据库中取出数据缓存起来，然后对缓存中的数据进行分页处理

2.实现分页的要素：

（1）总记录数

（2）每页显示的记录数

（3）需要的页数

（4）每页数据的起始索引

3.element-ui的分页组件：

---

一.图像组件

：保留了原生的img属性

        

        

//src属性：图像的地址，绑定变量用来指定图片的地址，通常需要使用required来来获取图片

//fit属性：确定图片如何适应到容器框（'fill'，‘contain’，‘cover’，‘none'，'scale-down'）

//lazy属性：图片懒加载（按需加载）

二.导航菜单（NavMenu）

1.导航方向：通过model属性来设置

2.菜单项：

        

                        //菜单项

                                //标题文本

                                        //文本前的图标

                                在线教材

                        

                                //子菜单项

                                出版图书

                        

                        教案管理

                        教材管理

                

        

//disabled属性：表示该菜单项不可用

三.上传组件：Upload

        

                

                

                将图书图片拖到此处，或点击上传

                只能上传jpg/png文件，且不超过2M

        

//drag属性：表示是否用拖拽上传

//action属性：上传服务器的地址

//:show-file-list：是否显示已上传文件列表（true/false）

//data：上传时是否需要附带额外的参数

//multiple：是否可以上传多个文件

//:on-change事件：当上传文件的内容发生改变时触发

//:on-success事件：当上传成功后触发

//before-upload：在上传之前触发（通常用于检查上传文件的格式、大小）

对应的代码：

//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的分页组件：

        

        

//size-change事件：每页显示的记录数发生改变时触发，会自动给事件处理函数传递一个参数，参数值是新的每页显示的记录数

//current-change事件：当前的页码发生改变时触发，会自动给事件处理函数传递一个参数，参数值是新的页码

//:current-page属性：当前页的页码

//:page-sizes属性：每页显示的记录数的列表，属性值是一个数组

//:page-size属性：当前每页显示的记录数，属性值是一个数字

//layout属性：分页组件的布局

//total属性：总记录数