js，element ui 相关问题

Question

js相关问题

我在页面上一开始有8个div，我的代码通过这2种方式可以实现对应的功能

方法一：

new Vue({
el: '#b-leftcol', 
    mounted(){
        document.addEventListener('mouseup',()=>{
        for(var a=1;a<=count;a++)
        {
         
         var x='treeMenuRef'+a;
         console.log(x);
         this.$refs[x].style.display= "none";
        }

      }) 


    },

方法二：

        for(var i=0;i<=num;i++)
        {
          if(node.level==2 && nodeData.label==MenuArray[i]){
          var x=i+1;
          var treeId='treeMenuRef'+(x);        
          if(rows[i]>1){
          increase=rows[x]-1;
          var treecss=document.getElementById(x);
          var px = 40 + increase * 30;
          treecss.style.height=px+'px';   
        }
          //console.log(event,nodeData);

          this.$refs[treeId].style.display = "block";
          this.$refs[treeId].style.top  = event.pageY  + "px";
          this.$refs[treeId].style.left = event.pageX+ "px";

          break;
        }

以上2种方法都是可以正常使用的，但是后来因为我想使用element ui的Drawer，（你要使用element ui不得给他一个div包起来么？）所以，我现在给那8个div外面加了一个大的div，然后执行就会发现这2个地方报错

我理解是不是要先获取大的div 然后在循环获取原来的8个div，但是又不知道如何下手，也不知道理解对不对
所以向各位请教。谢谢各位的不惜赐教，好人一生平安

我意思就是 addEventListener 和 document.getElementById() 之前获取黑色的div是没问题的，现在我外面加了一个蓝色的div就不行了

Answer 1

elementui的弹窗组件和抽屉组件都是异步组件，
其一有加载顺序，这种确保页面渲染了再做其他操作
其二如果给加了append-to-body这个属性，他的父节点有可能就不是你给的那个大div了，而是最外层的body