526互联

关于elementui的cascader组件多个级联大量数据滚动定位样式导致卡顿问题

发布时间 2023-10-23 18:20:22作者: 浪里小韭菜

如题，多个cascader级联组件，下拉选项含大量数据，滚动时会有实时样式重新渲染，导致CUP内存溢满而卡顿

解决尝试：使用elementui中的内部源码方法处理

<script>
    import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
    ...
    
    setup(){
        onMounted(){
            refs.cascaderRef.removeResizeListener();
        }
        // 折叠，展开
        const cascaderVisibleChange = (val) => {
            if (val) {
                refs.cascaderRef.addResizeListener();
            } else {
                refs.cascaderRef.removeResizeListener();
            }
        }
    }
    
</script>

注：测试后无效，弹窗样式实时更新；

 

# 解决方法：强制写入display: none;样式，可加loading一次性加载完后再允许滚动

<style lang="scss">
  .none-imp {
    display: none!important;
  }
</style>

// 当级联组件数据量大，滚动实时监听样式导致渲染消耗CPU内存溢出，可将其和子元素样式强制隐藏
const cascaderScrollStyle = (type) => {
    const popperEle = refs.cascaderRef[0].$refs.popper
    if (type === 'add') {
        // 父元素
        popperEle.classList.add('none-imp')
        // 第一个子元素
        popperEle.firstChild.classList.add('none-imp')
    } else if (type === 'remove') {
        popperEle.classList.remove('none-imp')
        popperEle.firstChild.classList.remove('none-imp')
    }
}

// 防止el-cascader数据量过大，选择时卡顿，去掉属性aria-owns
const cascaderVisibleChange = (val) => {
    if (val) {
        cascaderScrollStyle('remove')
    } else {
        cascaderScrollStyle('add')
    }
    nextTick(() => {
        // 下拉项滚动删除属性aria-owns
        const $el = document.querySelectorAll('.el-cascader-node[aria-owns]')
        Array.from($el).map(item => item.removeAttribute('aria-owns'))
    })
}

onMounted(() => {
    nextTick(() => {
        cascaderScrollStyle('add')
    })
})