элемент пользовательского интерфейса el-collapse впереди, если другие компоненты - PullRequest
Новая
       12

элемент пользовательского интерфейса el-collapse впереди, если другие компоненты

0 голосов
/ 28 апреля 2019

Это мой эл-коллапс: 

<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>

Закрыть enter image description here

Open enter image description here

Я хотел бы открыть его над другими компонентами (избегая перемещения приведенной ниже таблицы вправо)

Это мой макет 

<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 находится в разделе информационной панели, таблица - в основной секции приложения

Возможно ли это? Если нет, знаете ли вы компонент vue.js, который мог бы это сделать?

1 Ответ

0 голосов
/ 29 апреля 2019

Для дальнейшего использования: 

<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>
...