@fesjs/fes-design/es/table/components/bodyTable.js

fes-design for PC

import { defineComponent, inject, computed, createVNode } from 'vue';
import Scrollbar from '../../scrollbar/scrollbar.js';
import Draggable from '../../draggable/draggable';
import { provideKey } from '../const';
import Colgroup from './colgroup';
import Header from './header';
import Tr from './tr';

var bodyTable = defineComponent({
  props: {
    composed: {
      type: Boolean,
      default: false
    },
    columns: {
      type: Array,
      required: true
    }
  },
  setup(props) {
    const {
      layout,
      prefixCls,
      bodyWrapperRef,
      bodyWrapperClass,
      bodyWrapperStyle,
      bodyStyle,
      rootProps,
      showData,
      getRowKey,
      syncPosition,
      scrollbarRef,
      noFixedColumn,
      onDragstart,
      onDragend,
      beforeDragend,
      bodyTableRef
    } = inject(provideKey);
    const hasResizableColumn = computed(() => {
      return props.columns.some(col => col.props.resizable);
    });
    const renderBodyTrList = () => showData.value.map((row, rowIndex) => createVNode(Tr, {
      "row": row,
      "rowIndex": rowIndex,
      "columns": props.columns,
      "key": getRowKey({
        row
      }) || rowIndex
    }, null));
    const slots = {
      default: _ref => {
        let {
          item,
          index
        } = _ref;
        return createVNode(Tr, {
          "row": item,
          "rowIndex": index,
          "columns": props.columns,
          "expanded": false,
          "key": getRowKey({
            row: item
          }) || index
        }, null);
      }
    };
    const renderBody = () => {
      if (showData.value.length === 0) {
        return null;
      }
      if (rootProps.draggable) {
        return createVNode(Draggable, {
          "tag": "tbody",
          "modelValue": showData.value,
          "onUpdate:modelValue": $event => showData.value = $event,
          "beforeDragend": beforeDragend,
          "onDragstart": onDragstart,
          "onDragend": onDragend
        }, slots);
      }
      return createVNode("tbody", null, [renderBodyTrList()]);
    };
    const renderTable = () => {
      return createVNode("table", {
        "ref": bodyTableRef,
        "class": [`${prefixCls}-body`, rootProps.hoverable && 'is-hoverable'],
        "style": [bodyStyle.value, {
          'table-layout': props.composed ? 'fixed' : rootProps.layout
        }],
        "cellspacing": "0",
        "cellpadding": "0"
      }, [createVNode(Colgroup, {
        "columns": props.columns
      }, null), !props.composed && rootProps.showHeader && createVNode(Header, {
        "columns": props.columns
      }, null), renderBody()]);
    };
    const onScroll = e => {
      if ((layout.isScrollX.value || layout.isScrollY.value) && bodyWrapperRef.value.offsetHeight > 0 // BodyTable 没有高度时，同步滚动状态无意义
      ) {
        syncPosition(e);
      }
    };
    return () => {
      if (hasResizableColumn.value || layout.isScrollX.value || layout.isScrollY.value) {
        return createVNode(Scrollbar, {
          "ref": el => {
            if (el) {
              scrollbarRef.value = el;
              bodyWrapperRef.value = el.$el;
            }
          },
          "class": bodyWrapperClass.value,
          "style": bodyWrapperStyle.value,
          "horizontalRatioStyle": {
            zIndex: 3
          },
          "verticalRatioStyle": {
            zIndex: 3
          },
          "shadowStyle": {
            zIndex: 3
          },
          "shadow": {
            x: noFixedColumn.value,
            y: true
          },
          "always": rootProps.alwaysScrollbar,
          "onScroll": onScroll
        }, {
          default: () => [renderTable()]
        });
      }
      return createVNode("div", {
        "ref": el => {
          bodyWrapperRef.value = el;
        },
        "class": bodyWrapperClass.value,
        "style": bodyWrapperStyle.value
      }, [renderTable()]);
    };
  }
});

export { bodyTable as default };