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

目录

一.图像组件

二.导航菜单（NavMenu）

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

2.菜单项：

三.上传组件：Upload

四.分页组件

1.实现分页的方式：

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

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

2.实现分页的要素：

（1）总记录数

（2）每页显示的记录数

（3）需要的页数

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

3.element-ui的分页组件：

---

一.图像组件

<el-image>：保留了原生的img属性

        <el-image        style="width:100px;height:100px"        :src="url"        :fit="fit">

        </el-image>

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

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

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

二.导航菜单（NavMenu）

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

2.菜单项：

        <el-menu        model="方向"        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      drag      class="avatar-uploader"      multiple       style=