如果其他组件在前面，则元素UI el-collapse

Question

这是我的崩溃：

<template>
  <div id="realtime">
    <el-row>
      <el-collapse accordion>
        <el-collapse-item name="1" class="spy-infobar-collapse">
          <template slot="title">
            Consistency<i class="header-icon el-icon-info"></i>
          </template>
          <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
          <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
        </el-collapse-item>
      </el-collapse>
    </el-row>
  </div>
</template>

关闭

打开

我想在其他组件上打开它（避免将下表移到右侧）

这是我的布局

<template>
  <div class="app-wrapper" :class="classObj">
    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"></div>
    <sidebar class="sidebar-container"></sidebar>
    <div class="main-container">
      <navbar></navbar>
      <info-bar></info-bar>
      <app-main></app-main>
      <vue-snotify></vue-snotify>
      <back-to-top bottom="50px" right="50px">
        <div class="spy-back-to-top" style=""><i class="el-icon-caret-top"></i></div>
      </back-to-top>
    </div>
  </div>
</template>

el-collapse在信息栏部分，表格在app-main部分

有可能吗？如果没有，您是否知道可以做到的vue.js组件？

Answer 1

供以后参考：

<style>
.el-collapse-item {
  position: relative;
}

.el-collapse-item__wrap {
  position: absolute;
  top: 50px;
  right: 0;
  left: 0;
  z-index: 1;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1);
}

.el-collapse-item__content {
  user-select: none;
}

</style>