关于ElementUI 表格渲染优化的小技巧

2,339 阅读3分钟

前言:hello,大家好,我是栋子,由于前段时间在业务中用到el-table中嵌套el-select的场景,也就是表格的每一行是可以动态添加的,每一个单元格都是下拉框。在开发过程中因为测试的时候数据很少,并没有发现问题,本以为可以高高高兴兴的摸鱼了,结果过了一段时间后测试人员反馈页面明显出现卡顿。

a3832e83e0dda4d11cc6f65c3debd75c.jpeg

问题分析

开发测试的时候明明很丝滑,为什么现在会出现明显的卡顿呢,况且表格数据量并不是很大,于是就想会不会是因为下拉框的原因。于是打开控制台发现每次打开一个下拉框都会新创建一个el-popper的DOM,那么问题来了是否可以把el-popper做成类似单例的,只创建一个el-popver呢? 96744b0469b661f7fb4d60f0f2f4a110.jpeg

解决思路

  • 通过在表格的template中使用el-inpt同时设置readonly:true只读模式,模拟下拉框的样式,同时给el-input注册click点击事件,由于是只读模式,所以绑定的事件的时候需要使用.native修饰符

7.png

  • 在外部创建el-popover并注册ref,然后内部嵌套el-tree用来模拟下拉框里面的数据

8.png

  • 通过点击el-input去获取el-popover实例,然后调用updatePopper()方法即可

9.png 终于可以开开心心摸鱼了。。

d85cb3ebf1f702dfbe758ba68da34fc6.jpeg

实现过程中遇到的几个问题

Q:由于传给后端的字段需要是id,而el-input中使用的需要是id对应的中文名?

A:目前的解决方案是,选择树节点时,同时扩展中文字段,el-input绑定的这个中文字段去显示,同时也就解决了类似编辑回显的问题。

Q:选择树节点的时候可以通过其current-change事件去关闭el-popover,那点击其他区域的时候该如何关闭呢?

A:目前我的解决方案是引用了elementUi内置的Clickoutside指令(引用路径:element-ui/src/utils/clickoutside),在el-tree外层套了一个div并为其绑定了Clickoutside指令,这样点击除了div之外的区域就可以关闭el-popover了。

Q:el-tree的宽度如何跟span的宽度保持一致呢?

A:通过点击el-input时获取到相应clientWidth的值,然后给el-tree注册ref,把获取到的clientWidth赋给el-treemin-width属性,至于为什么不是赋值给width呢,是因为如果el-tree中的每条数据很长时要宽度自适应撑开(和el-select保持一致)

结果对比

改造前: image.png 改造后:

image.png

最后

此文章是在掘金发布的第一篇文章,目的是为了督促自己始终保持学习与总结,如果能同时帮助到大家自然更好不过啦。本文参考了别人的一些思路,然后结合实际的业务后想到的临时解决方案,如果各位大佬还有其他方式,还请不吝赐教~~~

参考链接

github.com/ElemeFE/ele…