【问题标题】:Sticky header on scroll in vuetify datatablevuetify数据表中滚动时的粘性标题
【发布时间】:2020-08-11 22:57:07
【问题描述】:

当 vuetify 数据表高度大于窗口高度时,当我们滚动页面时,我希望标题行保持粘性直到数据表滚动结束

行为应该与此类似 https://output.jsbin.com/zuzuqe/1/

也喜欢他们使用的数据表https://www.worldometers.info/coronavirus/

我也试过了

th {
    position:sticky;  
    top: 0;
    background-color: white;
}

sticky 的位置是相对于数据表而不是相对于窗口的

谁能给我一些关于如何使用 Vuetify 数据表实现相同的想法或 codepen 的建议

【问题讨论】:

    标签: css vue.js vuetify.js


    【解决方案1】:

    Vuetifydata table UI 组件中有 fixed-header 属性。结帐 -> https://vuetifyjs.com/en/components/data-tables/#api

    【讨论】:

    • fixed-header 只能用于使标题行在数据表级别内固定。它不会修复滚动页面,请查看此演示 output.jsbin.com/zuzuqe/1
    【解决方案2】:

    您可以使用 Vue 组件 Float Thead vue component 来做到这一点

    编辑: 这是可与 vuetify 一起使用的 vue 指令 v-simple-table

    使用:

    <v-simple-table v-simple-table-sticky></v-simple-table>
    

    指令:

    function stickyScrollHandler(el) {
        return () => {
            const getOffsetTop = function(element) {
                let offsetTop = 0;
                while (element) {
                    offsetTop += element.offsetTop;
                    element = element.offsetParent;
                }
                return offsetTop;
            }
    
            const table = el.querySelector("table");
            const tableHeader = el.querySelector(".adx-table_sticky_header");
            let tableHeaderFloat = el.querySelector(".adx-table_sticky--float");
    
            const pos = getOffsetTop(table) - window.scrollY;
    
            if (pos < 0) {
                if (!tableHeaderFloat) {
                    const clone = tableHeader.cloneNode(true);
                    clone.classList.remove('.table_sticky_header');
    
                    tableHeaderFloat = document.createElement('table');
                    tableHeaderFloat.appendChild(clone);
                    tableHeaderFloat.classList.add("adx-table_sticky--float");
                    table.parentNode.appendChild(tableHeaderFloat);
    
                    tableHeader.style.opacity = 0;
                }
    
                if (Math.abs(pos) < table.offsetHeight - tableHeaderFloat.offsetHeight) {
                    tableHeaderFloat.style.position = "absolute";
                    tableHeaderFloat.style.top = Math.abs(pos) + "px";
                }
            } else {
                if (tableHeaderFloat) {
                    tableHeaderFloat.remove();
                }
    
                tableHeader.style.opacity = 1;
            }
        }
    }
    
    Vue.directive("simple-table-sticky", {
        bind: function(el, binding, vnode) {
            el.querySelector("table thead").classList.add("adx-table_sticky_header");
            el.style.position = "relative"
    
            window.addEventListener('scroll', stickyScrollHandler(el));
        },
        unbind: function(el) {
            window.removeEventListener('scroll', stickyScrollHandler(el));
        }
    });
    

    【讨论】:

    • 这是一个不同的库,我已经使用 vuetify datatable 实现了 datatable 的所有功能。使用 vuetify 本身,如果有任何 css 修复,请提出建议。这对解决这个问题非常有帮助
    【解决方案3】:

    您的代码没问题,因为您正确地将粘性应用于&lt;th&gt; 元素。但是,问题是 Vuetify.js 数据表包装器溢出。可以通过/deep/选择器移除:

    .v-data-table /deep/ .v-data-table__wrapper {
      overflow: unset;
    }
    

    这是一个完整的工作示例:https://codesandbox.io/s/sticky-vuetify-table-header-3o0km

    我写了一篇小文章解释我对这个问题的解决方案:https://medium.com/@jareklipski/sticky-table-header-in-vuetify-js-fab39988dc3

    【讨论】:

      猜你喜欢
      • 2020-10-15
      • 1970-01-01
      • 1970-01-01
      • 2016-04-30
      • 1970-01-01
      • 2020-04-03
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多