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

fes-design for PC

import { defineComponent, computed, watch, createVNode, Fragment } from 'vue';
import { isUndefined } from 'lodash-es';
import { useTheme } from '../_theme/useTheme';
import { TABLE_NAME } from './const';
import useTable from './useTable';
import HeaderTable from './components/headerTable';
import BodyTable from './components/bodyTable';
import VirtualTable from './components/virtualTable';
import NoData from './components/noData';

const tableProps = {
  data: {
    type: Array,
    default: () => []
  },
  rowKey: [Function, String],
  bordered: {
    type: Boolean,
    default: false
  },
  showHeader: {
    type: Boolean,
    default: true
  },
  emptyText: {
    type: String
  },
  size: {
    type: String,
    default: 'middle'
  },
  spanMethod: Function,
  rowClassName: [Function, String, Array, Object],
  rowStyle: [Function, Object],
  height: Number,
  virtualScroll: {
    type: Boolean,
    default: false
  },
  virtualScrollOption: {
    type: Object,
    default: () => ({})
  },
  layout: {
    type: String,
    default: 'fixed'
  },
  draggable: {
    type: Boolean,
    default: false
  },
  beforeDragend: Function,
  checkedKeys: {
    type: Array,
    default() {
      return [];
    }
  },
  expandedKeys: {
    type: Array,
    default() {
      return [];
    }
  },
  columns: {
    type: Array,
    default() {
      return [];
    }
  },
  horizontalLine: {
    type: Boolean,
    default: true
  },
  verticalLine: {
    type: Boolean,
    default: false
  },
  hoverable: {
    type: Boolean,
    default: true
  },
  striped: {
    type: Boolean,
    default: false
  },
  alwaysScrollbar: {
    type: Boolean,
    default: false
  }
};
var table = defineComponent({
  name: TABLE_NAME,
  props: tableProps,
  emits: ['cellClick', 'expandChange', 'headerClick', 'headerResize', 'rowClick', 'select', 'selectAll', 'selectionChange', 'sortChange', 'afterSort', 'dragstart', 'dragend', 'update:checkedKeys', 'update:expandedKeys'],
  setup(props, ctx) {
    var _expose, _ref;
    useTheme();
    const {
      handleSelect,
      handleSelectAll,
      clearSelect,
      wrapperRef,
      wrapperClass,
      columns,
      rootProps,
      toggleRowExpend,
      sort,
      clearSorter,
      showData
    } = useTable(props, ctx);
    (_expose = (_ref = ctx).expose) === null || _expose === void 0 || _expose.call(_ref, {
      toggleRowSelection: handleSelect,
      toggleAllSelection: handleSelectAll,
      clearSelection: clearSelect,
      toggleRowExpend,
      sort,
      clearSorter
    });

    // 是否两个table
    const composed = computed(() => {
      return !isUndefined(rootProps.height);
    });
    watch([() => props.virtualScroll, () => props.rowKey, () => props.height], () => {
      if (props.virtualScroll && !props.rowKey) {
        console.warn(`[${TABLE_NAME}]: 当使用虚拟滚动时，请设置rowKey!`);
      }
      if (props.virtualScroll && !props.height) {
        console.warn(`[${TABLE_NAME}]: 当使用虚拟滚动时，请设置height!`);
      }
    }, {
      immediate: true
    });
    const render = () => {
      return createVNode(Fragment, null, [composed.value && rootProps.showHeader && createVNode(HeaderTable, {
        "columns": columns.value
      }, null), rootProps.virtualScroll && showData.value.length ? createVNode(VirtualTable, {
        "columns": columns.value
      }, null) : createVNode(BodyTable, {
        "composed": composed.value,
        "columns": columns.value
      }, null), showData.value.length === 0 && createVNode(NoData, null, null)]);
    };
    return () => {
      var _slots$default, _slots;
      return createVNode("div", {
        "ref": wrapperRef,
        "class": wrapperClass.value
      }, [createVNode("div", {
        "ref": "hiddenColumns",
        "class": "hidden-columns"
      }, [(_slots$default = (_slots = ctx.slots).default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(_slots)]), render()]);
    };
  }
});

export { table as default, tableProps };