固定列和表头的表格实现

前言脱离element-ui又借鉴element-ui，实现类似el-table的固定列和表头的效果1-1固定，1-2只支持上下滑动，2-1只支持左右滑动，2-2上下、左右均可滑动其中下图中1-2和2-1两part的滑动事件应用了el-table的mousewheel效果实现布局：<div class=“tree_table” v-on=“handleBodyScroll, resize: handleBodyScroll }"> <div class=“scroll_table” ref=“tableScroll”> <div class=“header” ref=“scrollHead” v-mousewheel=“handleHeaderMousewheel”> <ul class=“header_row row” :style=”{ ‘width’: ulBoxWidth }"> <li v-for="(date, index) in dateTitList" :key="‘head’ + index"> {{ date.dateText }} </li> </ul> </div> <div class=“body” ref=“tableContent”> <ul v-for="(item, index) in list" :key=“index” class=“row” :style="{ ‘width’: ulBoxWidth }" @mouseenter=“handleMouseEnter(index)” @mouseleave=“handleMouseLeave(index)"> <li v-for="(date, index) in dateTitList” :key="‘body’ + index" class=“border-dash”> <span>1</span> </li> </ul> </div> </div> <div class=“fixed_table” :class="{’table-fixed-left-scroll’: hasLeft}"> <div class=“fixed_header”> <ul class=“header_row row”> <li>项目</li> </ul> </div> <div class=“fixed_cont” ref=“fixedBody” v-mousewheel=“handleFixedMousewheel”> <ul v-for="(item, index) in list" :key="‘fixed_item’ + index" class=“row” @mouseenter=“handleMouseEnter(index)” @mouseleave=“handleMouseLeave(index)"> <li class=“border-dash”>{{ item.title }}</li> </ul> </div> </div></div>主要方法：handleBodyScroll(event) { this.scrollValue = this.bodyWrapper.scrollLeft this.hasLeft = this.scrollValue > 0 this.$refs.fixedBody.scrollTop = this.bodyWrapper.scrollTop this.$refs.scrollHead.scrollLeft = this.scrollValue},handleFixedMousewheel(event, data) { const bodyWrapper = this.bodyWrapper if (Math.abs(data.spinY) > 0) { const currentScrollTop = this.bodyWrapper.scrollTop if (data.pixelY < 0 && currentScrollTop !== 0) { event.preventDefault() } if (data.pixelY > 0 && bodyWrapper.scrollHeight - bodyWrapper.clientHeight > currentScrollTop) { event.preventDefault() } bodyWrapper.scrollTop += Math.ceil(data.pixelY / 5) } else { bodyWrapper.scrollLeft += Math.ceil(data.pixelX / 5) }},handleHeaderMousewheel(event, data) { const { pixelX, pixelY } = data; if (Math.abs(pixelX) >= Math.abs(pixelY)) { event.preventDefault(); this.bodyWrapper.scrollLeft += data.pixelX / 5; }}element-ui的mousewheelimport normalizeWheel from ’normalize-wheel’const isFirefox = typeof navigator !== ‘undefined’ && navigator.userAgent.toLowerCase().indexOf(‘firefox’) > -1;const mousewheel = function(element, callback) { if (element && element.addEventListener) { element.addEventListener(isFirefox ? ‘DOMMouseScroll’ : ‘mousewheel’, function(event) { const normalized = normalizeWheel(event); callback && callback.apply(this, [event, normalized]); }); }};export default { bind(el, binding) { mousewheel(el, binding.value); }};