Vuetify's v-data-table
component具有 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
?
最佳答案
尝试使用 height clac
.v-data-table__wrapper{height:calc(100vh - 150px) !important;}
关于javascript - Vuetify.js 数据表固定标题通过 CSS 滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57707812/