当前位置：首页 > news >正文

关于多个elementui的cascader级联组件页面滚动渲染样式导致卡顿问题

news 来源：原创 2024/5/10 19:53:40

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

小优化技巧：可加loading一次性加载完多个cascader级联组件后再允许页面滚动。

方法一：使用elementui中的内部源码的方法处理（推荐）

<script>// visible-change事件const cascaderVisibleChange = (val) => {const popperJsEle = refs.cascaderRef[0].popperJSif (val) {// 打开下拉时监听popper样式popperJsEle._setupEventListeners()} else {popperJsEle._removeEventListeners()}nextTick(() => {// 防止下拉框中滚动卡顿，去掉属性aria-ownsconst $el = document.querySelectorAll('.el-cascader-node[aria-owns]')Array.from($el).map(item => item.removeAttribute('aria-owns'))})}onMounted(() => {nextTick(() => {// 防止取不到poppperJS对象setTimeout(() => {// 调用内部方法，清除页面滚动实时监听给popper添加样式，导致内存溢满refs.cascaderRef[0].popperJS._removeEventListeners()}, 1000)})})</script>

方法二：强制写入display: none;样式（次推荐）

<style lang="scss">.none-imp {display: none!important;}
</style>// 当级联组件数据量大，滚动实时监听样式导致渲染消耗CPU内存溢出，可将其和子元素样式强制隐藏
const cascaderScrollStyle = (type) => {const popperEle = refs.cascaderRef[0].$refs.popperif (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-ownsconst $el = document.querySelectorAll('.el-cascader-node[aria-owns]')Array.from($el).map(item => item.removeAttribute('aria-owns'))})
}onMounted(() => {nextTick(() => {cascaderScrollStyle('add')})
})