element-plus
[Bug Report] [Component] [sub-menu, menu] el-submenu组件展开子菜单或收缩时，ui卡顿
Bug Type: Component
Environment
- Vue Version:
3.2.20 - Element Plus Version:
2.1.4 - Browser / OS:
Chrome/99.0.4844.74/Mac OS X 10_15_7 - Build Tool:
Vite
Reproduction
Related Component
-
el-sub-menu -
el-menu
Reproduction Link
Steps to reproduce
官网组件文档内即可复现，
What is Expected?
展开/收缩不卡顿
What is actually happening?
展开/收缩卡顿
Additional comments
在火狐浏览器91.6.1esr版本下不会卡顿
同样的问题，文档里的示例倒是没发现明显卡顿，但在测试项目里随便弄三个一级菜单，5个左右二级菜单，仅一个菜单包含三级，菜单项总数不超过20个，展开和折叠时就有非常明显的卡顿。另外经常仅仅是某一个菜单卡，其他正常，操作一会又会变成另一个卡。
.el-menu-vertical-demo:not(.el-menu--collapse) { width: 200px; min-height: 400px; }
我这边不知道为什么加上background-color="transparent" text-color="#eee"就会有明显的卡顿现象，复制官方的例子只加了这两个东西
看另一个issue说是setting图标引起的卡顿，实测不使用setting，就不会卡了。还有一个方法，图标不用el-icon包裹，这样使用setting也不会卡。具体原因不太清楚。
有没有人遇到展开折叠，文字会过一秒左右才消失或者显示，我录了一个gif在下面的链接 https://s2.loli.net/2022/08/09/DXKJV4I9df1M5zr.gif
有没有人遇到展开折叠，文字会过一秒左右才消失或者显示，我录了一个gif在下面的链接 https://s2.loli.net/2022/08/09/DXKJV4I9df1M5zr.gif Find the text style animation to make it disappear faster
有没有人遇到展开折叠，文字会过一秒左右才消失或者显示，我录了一个gif在下面的链接 https://s2.loli.net/2022/08/09/DXKJV4I9df1M5zr.gif Find the text style animation to make it disappear faster
我遇到了 垂直导航菜单 折叠展开都不流畅
可以试试用Chrome94以前的版本，我自己测试是从Chrome95之后开始出现卡顿的情况。 给Chromium提了issue：https://bugs.chromium.org/p/chromium/issues/detail?id=1384444 用Firefox是不是不会出现卡顿？
我这里使用Vue 3.2.41 + element-plus 2.2.26，首次显示不卡，但是点击按钮，切换左侧菜单的收起展开就很卡，要10多秒钟才能出来（我的菜单树形结构有4层，数量非常多）
根据@kooriookami说的与Chromium内核有关，我用操作系统自带的Edge浏览器，展开折叠不卡。用360浏览器（内核版本86的）也不会卡，用QQ浏览器（内核版本94的）也会卡，但卡的时间没有Chrome的久，Chrome的版本是107的。
在Vue Devtool中查看了一下，主要是patch非常耗时
后来edge版本升级到108.0.1462.46，折叠展开也卡了。
我使用的时候是用函数组件封装透传了一下，这样方便些树形结构的递归生成
<script>
import {h, resolveComponent} from 'vue'
import 'assets/css/jy-menu.scss'
function buildMenuItemList(menuList, level) {
const nodes = []
menuList.forEach(menu => {
if (menu.f_type === 1 && menu.children?.length > 0) {
nodes.push(
h(
resolveComponent('el-sub-menu'),
{class: `jy-sub-menu-level-${level}`, index: menu.f_id, 'popper-class': 'jy-menu__popper'},
{
default: () => buildMenuItemList(menu.children, level + 1),
title: () => [h('i', {class: 'fas fa-bars'}), h('span', {class: 'jy-menu__text'}, menu.f_name)]
}
)
)
} else if (menu.f_type === 2) {
nodes.push(
h(
resolveComponent('el-menu-item'),
{class: `jy-sub-menu-level-${level}`, index: menu.f_id},
{
default: () => h('i', {class: 'fas fa-file'}),
title: () => h('span', {class: 'jy-menu__text'}, menu.f_name)
}
)
)
}
})
return nodes
}
function JwMenu(props, context) {
console.log('render', {props, context})
const {attrs, emit, slots} = context
return h(
resolveComponent('el-menu'),
{
'collapse-transition': false,
...attrs,
class: 'jy-menu',
onSelect(index, indexPath) {
const menu = indexPath.reduce((menu, id) => menu.children.find(child => child.f_id === id), {children: props.menuList})
emit('select', index, indexPath, {path: menu.f_route_path, params: {...menu}})
}
},
{default: () => buildMenuItemList(props.menuList, 1)}
)
}
// JwMenu.name = 'JwMenu'
JwMenu.props = {menuList: {type: Array}}
JwMenu.emits = ['select']
export default JwMenu
</script>
有没有人遇到展开折叠，文字会过一秒左右才消失或者显示，我录了一个gif在下面的链接 https://s2.loli.net/2022/08/09/DXKJV4I9df1M5zr.gif Find the text style animation to make it disappear faster
@lvminjie5201314 这个是把 collapse-transition 设置为false，就不会出现这个现象了。
我这边把图标字体大小和菜单文字的都改为14px，仍旧很卡。而且我不是用的element自带的字体图标，试过把图标去掉，也卡。
我这边刚开始改了字体流畅了，后面又开始卡，应该不是字体问题，我发现我使用el-table的插槽属性大约2个以上就会导致侧边栏卡顿，在新版的108chrome下很丝滑，使用94chrome内核的qq浏览器明细掉帧卡顿
我这边把图标字体大小和菜单文字的都改为14px，仍旧很卡。而且我不是用的element自带的字体图标，试过把图标去掉，也卡。
试试用Firefox还有卡顿吗，这个问题很有可能是出在浏览器内核。