web-dev-qa-db-ja.com

CSSを介したVuetify.jsデータテーブルの固定ヘッダーのスクロール

Vuetifyのv-data-tableコンポーネント にはfixed-header機能。heightがテーブルの高さよりも小さい場合にヘッダーを固定します。

heightが明示的に設定されている場合に機能します。

HTML：

    <v-content id="mycontent">
      <v-container fluid id="mycontainer">
        <h2>Header</h2>
        <div id="outer">
          <v-data-table id="mytable" :headers="headers" :items="items" :height="height"
                        fixed-header disable-pagination disable-sort hide-default-footer>
          </v-data-table>
        </div>
      </v-container>
    </v-content>

CSS：

#mycontent {
}
#mycontainer {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#outer {
  flex: 1;
}
#mytable {
}
#mytable table {
  width: auto;
}

JS：

  data: () => ({
    headers: [
      { text: "Header A", value: "a" },
      { text: "Header B, longer", value: "b" },
      { text: "Header C", value: "c" }
    ],
    height: 100
  }),
  computed: {
    items() {
      var items = [];
      for (var i = 1; i <= 50; i++) {
        items.Push({ a: "Row " + i, b: "Column B", c: "Column C" });
      }
      return items;
    }
  },
  methods: {
    onResize() {
      this.height = document.getElementById("outer").clientHeight;
    }
  },
  mounted() {
    window.addEventListener("resize", this.onResize);
    this.$nextTick(this.onResize);
  }

ライブデモ

しかし、純粋なCSSで、または少なくともheightを明示的に設定せずに同じ効果を達成することは可能ですか？

javascripthtmlcssvue.jsvuetify.js
2
rustyx

height clacをお試しください

.v-data-table__wrapper{height:calc(100vh - 150px) !important;}

codepen を確認します

2
Sumit Patel

テーブルがページ内で常に固定サイズになるようにしたくない場合は、max-heightを設定し、v-data-tableからheight属性を削除する必要があります。

#mytable .v-data-table__wrapper {
  max-height: 300px;
}
0
Edgarasne