当vuetify数据表高度大于窗口高度时,当我们滚动页面时,我希望标题行保持粘性,直到数据表滚动结束
行为应类似于此https://output.jsbin.com/zuzuqe/1/
我也喜欢他们使用的https://www.worldometers.info/coronavirus/数据表
我也试过
th {
position:sticky;
top: 0;
background-color: white;
}
粘滞位置相对于datatable而不是相对于窗口
有没有人能给我一些关于如何使用Vuetify数据表实现相同功能的想法或代码?
4条答案
按热度按时间umuewwlo1#
您可以使用Vue组件Float Thead vue component来实现这一点
编辑:这是vue指令,可用于vuetify
v-simple-table
用途:
指令:
omqzjyyz2#
Vuetify
的data table
UI组件中有fixed-header
prop 。点击查看-> https://vuetifyjs.com/en/components/data-tables/#apiwqnecbli3#
您的代码没有问题,因为您正确地将粘性应用于
<th>
元素。然而,问题是Vuetify.js数据表 Package 器溢出。它可以通过/deep/
选择器删除:下面是一个完整的工作示例:https://codesandbox.io/s/sticky-vuetify-table-header-3o0km
我写了一篇小文章来解释我对这个问题的解决方案:https://medium.com/@jareklipski/sticky-table-header-in-vuetify-js-fab39988dc3
ktecyv1j4#
前面几个答案的组合对我很有效:
按照loomchild的建议取消对表 Package 的溢出设置:
并向组件添加固定头,如Enkhtulga所建议的(在这种情况下不需要在头上设置位置/顶部,这个 prop 会照顾它):