在vuetify数据表中滚动时出现粘性标题

ljo96ir5  于 2023-10-23  发布在  Vue.js
关注(0)|答案(4)|浏览(149)

当vuetify数据表高度大于窗口高度时,当我们滚动页面时,我希望标题行保持粘性,直到数据表滚动结束
行为应类似于此https://output.jsbin.com/zuzuqe/1/
我也喜欢他们使用的https://www.worldometers.info/coronavirus/数据表
我也试过

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

粘滞位置相对于datatable而不是相对于窗口
有没有人能给我一些关于如何使用Vuetify数据表实现相同功能的想法或代码?

umuewwlo

umuewwlo1#

您可以使用Vue组件Float Thead vue component来实现这一点
编辑:这是vue指令,可用于vuetify 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));
    }
});
omqzjyyz

omqzjyyz2#

Vuetifydata table UI组件中有fixed-header prop 。点击查看-> https://vuetifyjs.com/en/components/data-tables/#api

wqnecbli

wqnecbli3#

您的代码没有问题,因为您正确地将粘性应用于<th>元素。然而,问题是Vuetify.js数据表 Package 器溢出。它可以通过/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

ktecyv1j

ktecyv1j4#

前面几个答案的组合对我很有效:
按照loomchild的建议取消对表 Package 的溢出设置:

:deep(div.v-table__wrapper) {
  overflow: unset
}

并向组件添加固定头,如Enkhtulga所建议的(在这种情况下不需要在头上设置位置/顶部,这个 prop 会照顾它):

<v-data-table fixed-header>

相关问题