| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135 |
- import _extends from "@babel/runtime/helpers/esm/extends";
- import { createVNode as _createVNode } from "vue";
- import ColGroup from '../ColGroup';
- import { computed, defineComponent, nextTick, onBeforeUnmount, onMounted, ref, toRef, watchEffect } from 'vue';
- import { useInjectTable } from '../context/TableContext';
- import classNames from '../../_util/classNames';
- import addEventListenerWrap from '../../vc-util/Dom/addEventListener';
- function useColumnWidth(colWidthsRef, columCountRef) {
- return computed(() => {
- const cloneColumns = [];
- const colWidths = colWidthsRef.value;
- const columCount = columCountRef.value;
- for (let i = 0; i < columCount; i += 1) {
- const val = colWidths[i];
- if (val !== undefined) {
- cloneColumns[i] = val;
- } else {
- return null;
- }
- }
- return cloneColumns;
- });
- }
- export default defineComponent({
- name: 'FixedHolder',
- inheritAttrs: false,
- props: ['columns', 'flattenColumns', 'stickyOffsets', 'customHeaderRow', 'noData', 'maxContentScroll', 'colWidths', 'columCount', 'direction', 'fixHeader', 'stickyTopOffset', 'stickyBottomOffset', 'stickyClassName'],
- emits: ['scroll'],
- setup(props, _ref) {
- let {
- attrs,
- slots,
- emit
- } = _ref;
- const tableContext = useInjectTable();
- const combinationScrollBarSize = computed(() => tableContext.isSticky && !props.fixHeader ? 0 : tableContext.scrollbarSize);
- const scrollRef = ref();
- const onWheel = e => {
- const {
- currentTarget,
- deltaX
- } = e;
- if (deltaX) {
- emit('scroll', {
- currentTarget,
- scrollLeft: currentTarget.scrollLeft + deltaX
- });
- e.preventDefault();
- }
- };
- const wheelEvent = ref();
- onMounted(() => {
- nextTick(() => {
- wheelEvent.value = addEventListenerWrap(scrollRef.value, 'wheel', onWheel);
- });
- });
- onBeforeUnmount(() => {
- var _a;
- (_a = wheelEvent.value) === null || _a === void 0 ? void 0 : _a.remove();
- });
- // Check if all flattenColumns has width
- const allFlattenColumnsWithWidth = computed(() => props.flattenColumns.every(column => column.width && column.width !== 0 && column.width !== '0px'));
- const columnsWithScrollbar = ref([]);
- const flattenColumnsWithScrollbar = ref([]);
- watchEffect(() => {
- // Add scrollbar column
- const lastColumn = props.flattenColumns[props.flattenColumns.length - 1];
- const ScrollBarColumn = {
- fixed: lastColumn ? lastColumn.fixed : null,
- scrollbar: true,
- customHeaderCell: () => ({
- class: `${tableContext.prefixCls}-cell-scrollbar`
- })
- };
- columnsWithScrollbar.value = combinationScrollBarSize.value ? [...props.columns, ScrollBarColumn] : props.columns;
- flattenColumnsWithScrollbar.value = combinationScrollBarSize.value ? [...props.flattenColumns, ScrollBarColumn] : props.flattenColumns;
- });
- // Calculate the sticky offsets
- const headerStickyOffsets = computed(() => {
- const {
- stickyOffsets,
- direction
- } = props;
- const {
- right,
- left
- } = stickyOffsets;
- return _extends(_extends({}, stickyOffsets), {
- left: direction === 'rtl' ? [...left.map(width => width + combinationScrollBarSize.value), 0] : left,
- right: direction === 'rtl' ? right : [...right.map(width => width + combinationScrollBarSize.value), 0],
- isSticky: tableContext.isSticky
- });
- });
- const mergedColumnWidth = useColumnWidth(toRef(props, 'colWidths'), toRef(props, 'columCount'));
- return () => {
- var _a;
- const {
- noData,
- columCount,
- stickyTopOffset,
- stickyBottomOffset,
- stickyClassName,
- maxContentScroll
- } = props;
- const {
- isSticky
- } = tableContext;
- return _createVNode("div", {
- "style": _extends({
- overflow: 'hidden'
- }, isSticky ? {
- top: `${stickyTopOffset}px`,
- bottom: `${stickyBottomOffset}px`
- } : {}),
- "ref": scrollRef,
- "class": classNames(attrs.class, {
- [stickyClassName]: !!stickyClassName
- })
- }, [_createVNode("table", {
- "style": {
- tableLayout: 'fixed',
- visibility: noData || mergedColumnWidth.value ? null : 'hidden'
- }
- }, [(!noData || !maxContentScroll || allFlattenColumnsWithWidth.value) && _createVNode(ColGroup, {
- "colWidths": mergedColumnWidth.value ? [...mergedColumnWidth.value, combinationScrollBarSize.value] : [],
- "columCount": columCount + 1,
- "columns": flattenColumnsWithScrollbar.value
- }, null), (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots, _extends(_extends({}, props), {
- stickyOffsets: headerStickyOffsets.value,
- columns: columnsWithScrollbar.value,
- flattenColumns: flattenColumnsWithScrollbar.value
- }))])]);
- };
- }
- });
|