javascript - Scrollable table with Vue.js - Stack Overflow

admin管理员组

文章数量:1302982

So I have table which gets filled using vue.js v-for method:

<table>
  <tr><th>Name</th><th>Surname</th></tr>
  <tr v-for="user in users"><td>@{{user.name}}</td><td>@{{user.surname}}</td></tr>
</table>

And I need this table to be maximum 300px in height, and if it gets longer, it bees scrollable.

So basically I need to set max-height and overflow:auto parameters in my css, but the problem is that the code does not "see" this table appropriately because it is rendered with vue.

So far I've tried just adding parameters in css and adding them dynamically after loading the table; none of these worked.

But, if I call $('table').height(), it returns the actual height of the rendered table. Maybe I can use it somehow?

Would highly appreciate any possible help!

So I have table which gets filled using vue.js v-for method:

<table>
  <tr><th>Name</th><th>Surname</th></tr>
  <tr v-for="user in users"><td>@{{user.name}}</td><td>@{{user.surname}}</td></tr>
</table>

And I need this table to be maximum 300px in height, and if it gets longer, it bees scrollable.

So basically I need to set max-height and overflow:auto parameters in my css, but the problem is that the code does not "see" this table appropriately because it is rendered with vue.

So far I've tried just adding parameters in css and adding them dynamically after loading the table; none of these worked.

But, if I call $('table').height(), it returns the actual height of the rendered table. Maybe I can use it somehow?

Would highly appreciate any possible help!

• javascript
• jquery
• html
• css
• vue.js

Share Follow edited Aug 8, 2016 at 13:08 Mi-Creativity 9,6641010 gold badges4040 silver badges4848 bronze badges asked Aug 8, 2016 at 13:05 CoffeeCoffee 2,23399 gold badges3232 silver badges5757 bronze badges 2

• I'm late to the party, but I recently published an open-source table wrapper ponent for Vue that does horizontal and vertical body scrolling. github./richardtallent/vue-scrolling-table – richardtallent Commented Jan 31, 2018 at 2:13
• 1 @richardtallent sweet! great job! – Coffee Commented Feb 2, 2018 at 12:07

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Can you wrap the table in a <div>?

This way the div controls the scrolling and the table is free to go it's own way.

package.json

"cssnano-preset-default": {
      "version": "4.0.7",
      ...
        "postcss-calc": "^7.0.1",

Wrap <b-table or <table> with <template> then <div> and add css

table.vue

<!--wrapper--->
<template>
  <div>
    <b-table
      <!--...--->
    </b-table>
  </div>
</template>



<script>
import { mapGetters, mapMutations } from "vuex";

export default {
  name: "data-table",
  props: ["pageSource"],
  middleware: ["auth", "enable"],
  puted: {
    ...mapGetters(["loggedInUser", "userSettings"]),
  }
  <!--...--->
}
</script



<!-- css at bottom of page -->
<style lang="scss" scoped>

.b-table {
  max-height: calc(100vh - 300px);
  overflow-y: auto;
}
</style>

本文标签： javascriptScrollable table with VuejsStack Overflow