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

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

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

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

<script> // visible-change事件 const cascaderVisibleChange = (val) => { const popperJsEle = refs.cascaderRef[0].popperJS if (val) { // 打开下拉时监听popper样式 popperJsEle._setupEventListeners() } else { popperJsEle._removeEventListeners() } nextTick(() => { // 防止下拉框中滚动卡顿，去掉属性aria-owns const $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.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') }) })