vuetify сделать так, чтобы две секции v-flex имели одинаковую высоту рядом - PullRequest
Новая
       30

vuetify сделать так, чтобы две секции v-flex имели одинаковую высоту рядом

0 голосов
/ 13 апреля 2020

мой ожидаемый дисплей: enter image description here

текущий дисплей:

enter image description here

Я пытался сделать две таблицы имеют отзывчивую одинаковую высоту с помощью функций vuetify, моя текущая попытка приведена ниже: 

<template>
  <div>
    <v-layout class="duo-table" row wrap>
      <!-- reporting scope table -->
      <v-flex xs6 class="left-table">
        <v-flex height="100%">
          <div class="duo-table-header">
            REPORTING SCOPE
          </div>
          <div class="table-content">
            <v-layout>
              <v-flex xs3 class="left-table-xs3-col">
                246
              </v-flex>
              <v-flex xs9 class="left-table-xs9-col" >
                Total variants assessed
              </v-flex>
            </v-layout>
            <v-layout>
              <v-flex xs3 class="left-table-xs3-col">
                63
              </v-flex>
              <v-flex xs9 class="left-table-xs9-col">
                Total drugs assessed
              </v-flex>
            </v-layout>
          </div>
        </v-flex>
      </v-flex>
      <!-- your risk table -->
      <v-flex xs6 class="right-table">
        <v-flex height="100%">
          <div class="duo-table-header">
            YOUR RISK
          </div>
          <div class="table-content">
            <v-layout row wrap>
              <v-flex xs2 class="right-table-xs2-img">
                <v-img :src="imagePath" height='100%'/>
              </v-flex>
              <v-flex xs10>
                <v-flex height="100%">
                  <v-flex class="right-table-xs10-col">
                    YOUR PHARMACOGENOMIC RESULTS
                  </v-flex>
                  <v-flex class="right-table-xs10-col">
                    30 Drugs Potentially Impacted
                  </v-flex>
                </v-flex>
              </v-flex>
            </v-layout>
          </div>
        </v-flex>
      </v-flex>
    </v-layout>
  </div>
</template>

Я также пытался использовать flexbox, но это также не помогло. Я думаю, может быть, мне нужно добавить CSS к элементу img? Любые идеи для достижения моей цели здесь? Ткс заранее.

Ответы [ 2 ]

1 голос
/ 13 апреля 2020

если вы используете vuetify 2+, тогда v-layout и v-flex ограничены, вместо этого используйте v-row и v-col и переименуйте ваш div в v-container с атрибутом Fluid (только если вы хотите удалить отступы по умолчанию) V-контейнера). если вы не используете vuetify 2, я бы посоветовал вам перейти на него. 

<template>
  <v-container>
    <v-row>
      <!-- reporting scope table -->
      <v-col cols="6">
        <v-row class="duo-table-header">
          REPORTING SCOPE
        </v-row>
        <v-row class="table-content">
          <v-row>
            <v-col cols="6">
              246
            </v-col>
            <v-col cols="6">
              Total variants assessed
            </v-col>
          </v-row>
          <v-row>
            <v-col cols="6">
              63
            </v-col>
            <v-col cols="6">
              Total drugs assessed
            </v-col>
          </v-row>
        </v-row>
      </v-col>
      <v-col cols="6">
        <v-row class="duo-table-header">
          YOUR RISK
        </v-row>
        <v-row class="table-content">
          <v-col cols-="2">
            <v-img :src="imagePath" height='100%'/>
          </v-col>
          <v-col cols="10">
            <v-row>
              <v-col cols="12">
                YOUR PHARMACOGENOMIC RESULTS
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="12">
                30 Drugs Potentially Impacted
              </v-col>
            </v-row>
          </v-col>
        </v-row>
      </v-col>
    </v-row>
  </v-container>
</template>
0 голосов
/ 15 апреля 2020

Я решил свою проблему с использованием функции версии Vuetify 1.x и CSS

моего шаблона: 

<v-layout row wrap>
  <!-- reporting scope table -->
  <v-flex xs6>
    <div>
      REPORTING SCOPE
    </div>
    <v-layout row wrap>
      <v-flex xs3>
        246
      </v-flex>
      <v-flex xs9>
        Total variants assessed
      </v-flex>
      <v-flex xs3>
        63
      </v-flex>
      <v-flex xs9>
        Total drugs assessed
      </v-flex>
    </v-layout>
  </v-flex>
  <!-- your risk table -->
  <v-flex xs6>
    <div>
      YOUR RISK
    </div>
    <v-layout class="right-table-content">
      <v-flex xs2>
        <v-img :src="imagePath" style="height:100%;"/>
      </v-flex>
      <v-flex xs10>
        <v-layout row wrap>
          <v-flex xs12>
            YOUR PHARMACOGENOMIC RESULTS
          </v-flex>
          <v-flex xs12>
            {{ drugsNum }} Drugs Potentially Impacted
          </v-flex>
        </v-layout>
      </v-flex>
    </v-layout>
  </v-flex>
</v-layout>

связанных CSS стиля: 

.right-table-content {
  display: flex;
}

Ключевой момент - завернуть две таблицы в один контейнер. А для правой таблицы с изображением мы можем использовать функцию CSS для установки двух секций с гибким дисплеем

...