vue--element-ui的同一标签顺序添加两次loading时第二次loading全屏的问题

　　在使用element-ui做后台管理系统的过程中，发现了个问题，原有的左侧tree结构加载时有loading，现在在上传excel过程中，需要在上传时禁止操作当前tree结构，因此在上传时拿到当前节点，使用服务方式进行loading渲染，这时出了问题。

　　前提条件： 两个loading均为服务方式，操作的标签为同一个

　　原有思路： 在上传时添加loading，上传成功后loading.close()关闭当前loading，然后请求tree结构的数据，接着渲染loading，然后请求成功后关闭loading（因tree结构的loading在初始化或操作时就有loading，为不破坏结构，才会准备使用两次loading）

　　预期效果： 页面上传excel时，tree结构会连续产生两次loading遮罩

　　实际效果： 在第二次loading生成时，loading大小会由正常大小突然切换到全屏状态  https://codepen.io/jiangguangyao/pen/WNoGRqb

　　可能造成出现该问题的原因：

　　　　1. 请求tree结构的loading有问题 

　　　　2. 其中有异步加载

　　分析问题：

　　　　问题1： 首先pass掉，因为在页面初始化的时候，会发起一次tree数据的请求，当前遮罩没问题

　　　　问题2： 在请求成功后，使用$nextTick()包裹，产生异步，但结果还是会从正常状态突然切到全屏状态

　　分析解决方法： 经过研究源码，发现在loading关闭时会有400ms（300+100）的延时 ，OK，找到问题了，试验一下在上传成功后先loading.close()关闭，然后设置setTimeout()延时400ms，结果页面正常显示，但两次loading之间会有很明显的空挡区（400ms延时造成的），由此分析，在loading.close方法执行时，loading会瞬间关闭，400ms延时可能是为了删掉页面内的class定位 ---- 服务方式生成loading时会加上relative定位，close方法执行时会删除这个定位，但有延迟，所以分析问题产生原因，是第一次的close方法执行时在延时，第二次的loading给同一个标签添加定位，然后第一次的定位开始清除，会把当前标签的定位清除掉，致使loading相对父级元素的定位发生错误，导致的第二次loading先正常后立刻全屏的现象  问题： 在element-ui的在线运行中，试验了两个服务方式给同一标签渲染loading，但没问题  已解决：因为loading走的公共的$loading，如两次loading均为新创建的，则无影响。

　　最终解决方案： 1. 因延时有空挡区，所以决定使用一个loading来覆盖（同一标签，同一loading，内部包含两个接口）

　　　　　　　　　 2. 给需要加loading的标签（非全屏状态下）添加position:relative属性

　　封装的公共loading服务代码如下：（需要添加其他属性请自行添加）

function loading(self, isFullscreen, target, text) {
    const loading = self.$loading({
        target: target,
        lock: true,
        text: text || '拼命加载中',
        spinner: 'el-icon-loading',
        funnscreen: isFullscreen
    })
    return loading
}    

　　结尾： 虽说loading这问题，当时第一想法就是在两个请求放在一个loading内（第一个接口执行时生成loading，第二个接口执行完成后关闭），但因代码结构中已在单独接口中使用loading，因此才出现的上述问题，既然有问题了就尝试着解决吧，可以说这次是踩了个坑，但最起码以后不会再出现类似情况，欢迎兄弟们来一起讨论