Element组件中组件的使用问题

直接使用el-image组件会导致一个问题：当用户点击图片的时候页面滚动条消失！

原因：组件API中有这样一条：

参数	说明	类型	默认值
scroll-container	开启懒加载后，监听 scroll 事件的容器	string / HTMLElement	最近一个 overflow 值为 auto 或 scroll 的父元素

 

 

 

 

解决方法：全局设置样式页面滚动优先级：body {overflow: scroll !important;} 问题解决

 

---

 

el-image大图预览无效

参数	说明	类型
preview-src-list	开启图片预览功能	Array

 

 

 

 

解决方法：查看绑定的数据是否为一个数组，v-for循环遍历数组绑定给src，大图预览绑定循环的数组

---

el-image懒加载无效

参数	说明	类型	默认值
lazy	是否开启懒加载	boolean	false

 

 

 

解决方式：查看图片布局是否是flex布局，flex布局默认加载所有图片，懒加载优先级低

el-backtop组件直接复制粘贴没有效果

解决方法：将组件放入最外层的盒子里面第一个，去掉 target 属性使用（默认的target属性就是外层盒子）：↑

el-menu：在页面刷新时子菜单未展开

参数	说明	类型	默认值
router	是否使用 vue-router 的模式	boolean	false
unique-opened	是否只保持一个子菜单的展开	boolean	false
default-active	当前激活菜单的 index	string	——

 

 

 

 

 

 

解决方法：使用上面三个常用API，router开启子菜单路由模式和unique-opened直接使用，default-active需要绑定子菜单的路由地址

写法：:default-active="$route.path"

el-submenu不多介绍，注意设置好index和key

el-menu-item使用方式：

参数	说明	类型
index	唯一标志	string

 

 

 

 

注意这里的index绑定必须是路由地址，写法：index="/user" 这里的路由地址必须是  “ / ”开头，否则上面的激活绑定无效

完整分页功能参数使用

　　 @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">