vue element ui select 置于object标签

在使用自定义报表(grid++ report 服务端报表)时,因grid++服务端报表采用的object来加载的报表数据，发现object始终在div层之上,通过百度基本都说的是object标签flash的解决方案。也尝试了很多种，根本无法解决我的问题。所以我只能从element 源码基础上来改造select组件

如上图通过控制台调试看到生成的html找到组件el-scrollbar，因为我知道iframe的层级在object之上。所以在el-scrollbar放置了div来包裹iframe。

 <el-scrollbar
          tag="ul"
          wrap-class="el-select-dropdown__wrap"
          view-class="el-select-dropdown__list"
          ref="scrollbar"
          style="z-index:2;"
          :class="{ 'is-empty': !allowCreate && query && filteredOptionsCount === 0 }"
          v-show="options.length > 0 && !loading">
          <el-option
            :value="query"
            created
            v-if="showNewOption">
          </el-option>
          <slot></slot>
        </el-scrollbar>
          <div v-if="loadiframe" :style="{display:visible===true?'block':'none'}" style="opacity:0.5;position:absolute;top:0;height:100%;width:100%;z-index:1;"> <iframe frameborder="0" width="100%" height="100%"></iframe></div>

直接编译element代码 npm run dist ，生成的lib替换项目中的lib
可以看到，我将el-scrollbar的z-index设置了2,iframe的div设置了半透明，z-inex设置了为1.这样ul>li 就可以置于顶上了。(图2)查看效果

再看未改造之前(图3)