css - How can I set v-data-table height to 100% when it is placed inside a flex container? - Stack Overflow

admin管理员组

文章数量:1399974

I have a component which renders a v-data-table

<!-- UsersDataTable.vue -->
<template>
  <div>
    <DataTable v-bind="$attrs" :headers="headers" hide-default-footer disable-pagination />

    <!-- Other stuff... -->
  </div>
</template>

<script>
import DataTable from '@/components/DataTable.vue'

export default {
  components: {
    DataTable,
  },

  data() {
    return {
      headers: [
        {
          text: 'Id',
          value: 'id',
        },
        {
          text: 'First name',
          value: 'firstName',
        },
        {
          text: 'Last name',
          value: 'lastName',
        },
      ],
    }
  },
}
</script>

This is how DataTable.vue looks like

<template>
  <div>
    <BaseDataTable v-bind="$props" v-on="$listeners">
      <!-- Cycling slots -->
      <template v-for="(_, name) in $slots">
        <template :slot="name">
          <slot :name="name"></slot>
        </template>
      </template>

      <!-- Cycling scoped slots -->
      <template v-for="(_, name) in $scopedSlots" #[name]="data">
        <slot :name="name" v-bind="data"></slot>
      </template>
    </BaseDataTable>

    <!-- Other stuff... -->
  </div>
</template>

<script>
import BaseDataTable from '@/components/base/BaseDataTable.vue'

export default {
  extends: BaseDataTable,

  components: {
    BaseDataTable,
  },
}
</script>

And this is how BaseDataTable.vue looks like

<template>
  <v-data-table v-bind="$props" v-on="$listeners">
    <!-- Cycling slots -->
    <!-- Cycling scoped slots -->
  </v-data-table>
</template>

<script>
import { VDataTable } from 'vuetify/lib'

export default {
  extends: VDataTable,
}
</script>

(Unluckly above "inheritance chain" is needed)

I tried using UsersTable inside a flex container, and everything works fine if I set its height to a fixed value like 200.

<template>
  <v-app>
    <v-main>
      <div style="height: 100vh" class="d-flex flex-column">
        <div style="height: 50px; background-color: black"></div>
        <v-container class="flex-grow-1" fluid>
          <UsersTable :items="users" height="200" />
        </v-container>
      </div>
    </v-main>
  </v-app>
</template>

<script>
import UsersTable from './components/UsersTable.vue'

export default {
  components: {
    UsersTable,
  },

  data() {
    return {
      users: [],
    }
  },

  created() {
    this.users = Array.from({ length: 100 }, (_, i) => {
      return {
        id: i + 1,
        firstName: 'John',
        lastName: 'Doe',
      }
    })
  },
}
</script>

But when I set the height to 100%, everything breaks. The black banner disappears and the table doesn't really take 100% of the available space provided by the v-container. What am I missing? You can find a link to the sandbox here

Edit #1

If instead of showing a v-data-table we want to show a div with its height set to 100%, it works as intended

...
<v-container class="flex-grow-1" fluid>
  <div style="height: 100%; background-color: blue"></div>
</v-container>
...

I have a component which renders a v-data-table

<!-- UsersDataTable.vue -->
<template>
  <div>
    <DataTable v-bind="$attrs" :headers="headers" hide-default-footer disable-pagination />

    <!-- Other stuff... -->
  </div>
</template>

<script>
import DataTable from '@/components/DataTable.vue'

export default {
  components: {
    DataTable,
  },

  data() {
    return {
      headers: [
        {
          text: 'Id',
          value: 'id',
        },
        {
          text: 'First name',
          value: 'firstName',
        },
        {
          text: 'Last name',
          value: 'lastName',
        },
      ],
    }
  },
}
</script>

This is how DataTable.vue looks like

<template>
  <div>
    <BaseDataTable v-bind="$props" v-on="$listeners">
      <!-- Cycling slots -->
      <template v-for="(_, name) in $slots">
        <template :slot="name">
          <slot :name="name"></slot>
        </template>
      </template>

      <!-- Cycling scoped slots -->
      <template v-for="(_, name) in $scopedSlots" #[name]="data">
        <slot :name="name" v-bind="data"></slot>
      </template>
    </BaseDataTable>

    <!-- Other stuff... -->
  </div>
</template>

<script>
import BaseDataTable from '@/components/base/BaseDataTable.vue'

export default {
  extends: BaseDataTable,

  components: {
    BaseDataTable,
  },
}
</script>

And this is how BaseDataTable.vue looks like

<template>
  <v-data-table v-bind="$props" v-on="$listeners">
    <!-- Cycling slots -->
    <!-- Cycling scoped slots -->
  </v-data-table>
</template>

<script>
import { VDataTable } from 'vuetify/lib'

export default {
  extends: VDataTable,
}
</script>

(Unluckly above "inheritance chain" is needed)

I tried using UsersTable inside a flex container, and everything works fine if I set its height to a fixed value like 200.

<template>
  <v-app>
    <v-main>
      <div style="height: 100vh" class="d-flex flex-column">
        <div style="height: 50px; background-color: black"></div>
        <v-container class="flex-grow-1" fluid>
          <UsersTable :items="users" height="200" />
        </v-container>
      </div>
    </v-main>
  </v-app>
</template>

<script>
import UsersTable from './components/UsersTable.vue'

export default {
  components: {
    UsersTable,
  },

  data() {
    return {
      users: [],
    }
  },

  created() {
    this.users = Array.from({ length: 100 }, (_, i) => {
      return {
        id: i + 1,
        firstName: 'John',
        lastName: 'Doe',
      }
    })
  },
}
</script>

But when I set the height to 100%, everything breaks. The black banner disappears and the table doesn't really take 100% of the available space provided by the v-container. What am I missing? You can find a link to the sandbox here

Edit #1

If instead of showing a v-data-table we want to show a div with its height set to 100%, it works as intended

...
<v-container class="flex-grow-1" fluid>
  <div style="height: 100%; background-color: blue"></div>
</v-container>
...

• css
• vue.js
• vuejs2
• vuetify.js

Share Improve this question Follow edited Mar 27 at 10:55 PyKKe asked Mar 25 at 11:47 PyKKePyKKe 39511 silver badge1919 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Thanks for sharing a sandbox! I removed some containers and height settings. The display flex is not useful and not needed here. I see now the banner and the table as full height. Was this your approach?

 <v-app>
    <v-main>
      <div style="height: 50px; background-color: black"></div>
      <v-container fluid>
        <UsersTable :items="users" />
      </v-container>
    </v-main>
  </v-app>

本文标签： cssHow can I set vdatatable height to 100 when it is placed inside a flex containerStack Overflow