Липкий заголовок на свитке в vuetify datatable - PullRequest
Новая
       7

Липкий заголовок на свитке в vuetify datatable

1 голос
/ 28 апреля 2020

Когда высота vattify datatable больше, чем высота окна, когда мы прокручиваем страницу, я хочу, чтобы строка заголовка оставалась липкой до тех пор, пока не прокручивается дата datatable

Поведение должно быть примерно таким: https://output.jsbin.com/zuzuqe/1/

также как и данные, которые они использовали https://www.worldometers.info/coronavirus/

Я также пробовал 

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

Позиция «липкая» относительно в таблицу данных, а не в окно

Может кто-нибудь предложить мне какую-нибудь идею или кодовую ручку о том, как реализовать то же самое с помощью таблицы данных Vuetify

Ответы [ 2 ]

1 голос
/ 28 апреля 2020

Это можно сделать с помощью Vue компонента Float Thead vue компонента

РЕДАКТИРОВАТЬ: эта директива 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));
    }
});
0 голосов
/ 28 апреля 2020

В Vuetify пользовательском интерфейсе *1003* имеется fixed-header реквизит. Оформить заказ -> https://vuetifyjs.com/en/components/data-tables/#api

...