前言:hello,大家好,我是栋子,由于前段时间在业务中用到
el-table
中嵌套el-select
的场景,也就是表格的每一行是可以动态添加的,每一个单元格都是下拉框。在开发过程中因为测试的时候数据很少,并没有发现问题,本以为可以高高高兴兴的摸鱼了,结果过了一段时间后测试人员反馈页面明显出现卡顿。
问题分析
开发测试的时候明明很丝滑,为什么现在会出现明显的卡顿呢,况且表格数据量并不是很大,于是就想会不会是因为下拉框的原因。于是打开控制台发现每次打开一个下拉框都会新创建一个el-popper
的DOM,那么问题来了是否可以把el-popper
做成类似单例的,只创建一个el-popver
呢?
解决思路
- 通过在表格的
template
中使用el-inpt
同时设置readonly:true
只读模式,模拟下拉框的样式,同时给el-input
注册click
点击事件,由于是只读模式,所以绑定的事件的时候需要使用.native
修饰符
- 在外部创建
el-popover
并注册ref
,然后内部嵌套el-tree
用来模拟下拉框里面的数据
- 通过点击
el-input
去获取el-popover
实例,然后调用updatePopper()
方法即可
终于可以开开心心摸鱼了。。
实现过程中遇到的几个问题
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-tree
的min-width
属性,至于为什么不是赋值给width
呢,是因为如果el-tree
中的每条数据很长时要宽度自适应撑开(和el-select保持一致)
结果对比
改造前: 改造后:
最后
此文章是在掘金发布的第一篇文章,目的是为了督促自己始终保持学习与总结,如果能同时帮助到大家自然更好不过啦。本文参考了别人的一些思路,然后结合实际的业务后想到的临时解决方案,如果各位大佬还有其他方式,还请不吝赐教~~~