使用了umy-ui
的表格,虚拟滚动,对大数据卡顿已经有了不错的改善,但是发现在表格行中塞入el-dropdown
组件后,就会变更的明显的卡顿,该如何优化呢?
自己处理好了,思路,默认晴空下把所有的el-dropdown隐藏起来,在获取表格数据的时候每一条记录添加属性,标记是否有下拉按钮,点击时,动态设置一个变量,v-if显示该el-dropdown就行。
在使用umy-ui
的表格组件(假设它是基于Element UI或类似UI库的一个封装)并启用了虚拟滚动来处理大数据时,表格行内嵌入el-dropdown
导致的卡顿问题可能源于多个方面。以下是一些优化建议:
el-dropdown
的内容el-dropdown
内的内容是否过于复杂或包含大量DOM元素。简化下拉菜单的内容可以减少渲染和更新的成本。el-dropdown
的位置固定不变,可以考虑将其移出表格的虚拟滚动区域。el-dropdown
和表格相关的CSS选择器尽可能高效,避免使用复杂的或通用的选择器。transform
或opacity
属性来触发硬件加速,但需注意过度使用可能导致其他问题。v-show
代替v-if
:如果el-dropdown
的显示状态经常改变,但内容不常变,可以考虑使用v-show
来避免频繁的DOM创建和销毁。el-dropdown
的显示内容,通过计算属性和观察者来优化数据的响应性。el-dropdown
及其内容,以找到导致卡顿的具体原因。优化嵌入在虚拟滚动表格中的el-dropdown
通常涉及多个方面的调整,包括减少渲染内容、优化DOM操作、改进虚拟滚动的实现以及使用CSS和Vue的性能优化技巧。通过逐步排查和优化,通常可以显著改善性能问题。
vue3+element plus项目,当使用了el-table的展开行时,想要实现全部展开功能,在全部展开时会卡顿,阻塞线程。 使用了:expand-row-keys="expandRowArr",通过将key全部插入数组expandRowArr.value = commentList.value.map(item => item.commentIndex),来实现全部展开的效果。 最开始使用的
共同点是两者都可以下拉
element-ui组件el-popover嵌套使用的问题,在使用el-popover显示内容时,内容里面还需要使用到el-popover,都是hover触发方式,当鼠标移动到里面的el-popover时,外面的el-popover就自动关闭了,请问如何处理这个问题?
el-table 如何根据表格数据合并行。 如图所示,name列的值一样,就合并成一行;Amount 1列合并成3行 演示地址
该如何正确的做动态表单校验: “el-form-item”是后来加上的,加上el-select之后位置都变了
element-ui中的el-card卡片组件内容为什么不换行,当内容过长时,后面部分直接看不见了,怎么让内容自动换行呢?
elementUI el-drawer 点击右上角 关闭按钮会卡顿,添加动画这之后 edge浏览器可以了,谷歌上还是卡。这个怎么解决
关键代码: 在线demo: https://codesandbox.io/s/vue-2-element-ui-forked-ihh33k?file=... 从demo中可以看出,左边的button比右边要高出半个像素,只是因为左边加了一个icon。但button的font-size都是固定的12px,行高为1,这多余的半个像素是怎么出来的呢?