Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /**
- * table 使用的指令,当 table 列较多时,会出现横向滚动条
- * 添加了这个指令,能使底部滚动条不仅仅显示在表格底部,而是会在表格中间出现
- * @param {Number} 可接受一个数字类型参数,表示 table 上边框离浏览器窗口多少px开始fix底部滚动条,默认 0
- */
- const ElementTableCtx = '__ElementTableBottomCtx';
- function createScrollBar(root) {
- const docfrag = document.createDocumentFragment();
- const scrollWrap = document.createElement('div');
- const scroll = document.createElement('div');
- scrollWrap.style.position = 'absolute';
- scrollWrap.style.top = '9999px';
- scrollWrap.style.width = '100%';
- scrollWrap.style.height = '14px';
- scrollWrap.style.zIndex = '102';
- scrollWrap.style.display = 'block';
- scrollWrap.style.overflowX = 'scroll';
- scrollWrap.style.border = '1px solid #ccc';
- scrollWrap.style.backgroundColor = '#fff';
- scrollWrap.style.padding = '2px 0';
- scrollWrap.classList.add('scroll-wrap');
- scroll.classList.add('scroll-body');
- scroll.style.height = '1px';
- scrollWrap.appendChild(scroll);
- docfrag.appendChild(scrollWrap);
- root.appendChild(docfrag);
- return scrollWrap;
- }
- export default function install(Vue) {
- Vue.directive('fixed-bottom-scrollbar', {
- bind(el, binding, vnode) {
- const startFixed = binding.value || 0;
- const bodyWrapper = el.querySelector('.el-table__body-wrapper');
- const scrollWrap = createScrollBar(el);
- if (typeof startFixed !== 'number') {
- throw TypeError('fixed-header needs number value');
- }
- const bodyScroll = function bodyScroll() {
- bodyWrapper.scrollLeft = this.scrollLeft;
- };
- scrollWrap.addEventListener('scroll', bodyScroll);
- const windowScroll = () => {
- const pos = el.getBoundingClientRect();
- const screenHeight = window.innerHeight;
- if (pos.top - startFixed < 0 && pos.bottom > screenHeight) {
- if (el[ElementTableCtx].fixed) {
- scrollWrap.style.top = screenHeight - pos.top - 16 + 'px';
- } else {
- scrollWrap.style.top = screenHeight - pos.top - 16 + 'px';
- scrollWrap.scrollLeft = bodyWrapper.scrollLeft;
- el[ElementTableCtx].fixed = true;
- }
- } else {
- scrollWrap.style.top = '9999px';
- el[ElementTableCtx].fixed = false;
- }
- };
- window.addEventListener('scroll', windowScroll);
- el[ElementTableCtx] = {
- bodyScroll,
- windowScroll
- };
- },
- inserted(el, binding, vnode) {
- },
- componentUpdated(el, binding, vnode) {
- setTimeout(() => {
- const tableWrapper = el.querySelector('.el-table__body');
- const scrollBody = el.querySelector('.scroll-body');
- const startFixed = binding.value || 0;
- const scrollWrap = el.querySelector('.scroll-wrap');
- scrollBody.style.width = tableWrapper.clientWidth + 'px';
- const pos = el.getBoundingClientRect();
- const screenHeight = window.innerHeight;
- if (pos.top - startFixed < 0 && pos.bottom > screenHeight) {
- scrollWrap.style.top = screenHeight - pos.top - 16 + 'px';
- }
- }, 150);
- },
- unbind(el) {
- const {windowScroll, onScroll} = el[ElementTableCtx];
- window.removeEventListener('scroll', onScroll);
- window.removeEventListener('scroll', windowScroll);
- }
- });
- }
Add Comment
Please, Sign In to add comment