问题描述:el-dialog里有一个el-select 两者都被插到了body上,这就导致了当el-select获得焦点并滚动el-dialog 时 ,el-select的下拉框滚出el-dialog 时,并不会消失,因为他们得层级一样,都直接被插到的body上。
- 尝试方法1(失败):给el-select加上:popper-append-to-body=false 让它插到父级上。但是这样的话,el-select的下拉框莫名其妙的出现在el-dialog的外部,element组件自动计算的element.style把位置计算到了一个莫名其妙的位置上,从来没遇到过这种情况
- 尝试方法2(失败):加正确的样式 并加上!important强制使用,但是这样的话每次滚动一点,element.style的自动计算就又将位置搞飞了,这就导致只有focus时,下拉框第一次出现时的位置是正确的,一旦滚动就不对了
- 尝试方法3(失败):给el-dialog的el-body添加滚动监听事件,每次滚动后都用js将下拉框拉回到正确位置,但这样就导致了滚动时下拉框不停的闪烁,这是因为他不停的在正确和错误的位置切换
- 尝试方法4(失败):查找如何禁用element自动计算, 查找无结果
- 尝试方法5(失败):思考是不是某些熟悉导致的位置计算错误,将el-dialog不插到body上,无效果,下拉框位置仍然计算错误。将el-select注释,因为上面绑定太多属性、方法和数值了,拿最简单的数据写一个新的el-select,并将其从el-form中提出来直接放到el-dialog下面,无效果,下拉框位置仍然计算错误
- 尝试方法6(失败):使用js的cloneNode(true) 深度克隆 将正确的下拉框克隆一份放到正确位置,克隆方法不起作用,查找不起作用的原因:未找到。
- 尝试方法7(失败):写两个el-select,第一个拉到错误的位置,但使其下拉框在正确的位置,并将第一个隐藏。这样的话就用第二个选择框和第一次下拉框拼成一个正确的。第二个下拉框出现时触发的方法中 手动触发第一个下拉框的焦点,使第一个下拉框出现。结果:失败,一个页面同一时间只能一个地方获取焦点。
- 尝试方法8(失败):自己写一个list,数据和错误位置的下拉框的数据绑定一致,考虑到下拉框的三角样式,准备用el-tooltip,但el-tooltip只能hover,不能click,遂用el-popover,而且发现el-popover和el-tooltip都只能插到body上,遂放弃。而el-dialog无自带三角样式
- 尝试方法9(成功):自己写list,自己写三角样式,数据和错误位置的下拉框的数据绑定一致,在下拉框出现时触发的方法中,显示list,下拉框隐藏时触发的方法中,隐藏list。结果:位置正确,不闪烁,滑到el-dialog边缘自动隐藏。