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

fes-design for PC

import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
import { ref, watch, provide } from 'vue';
import { isArray } from 'lodash-es';
import { getCellValue, getRowKey } from './helper';
import { TABLE_NAME, provideKey } from './const';
import useTableColumn from './useTableColumn';
import useTableEvent from './useTableEvent';
import useTableSelect from './useTableSelect';
import useTableExpand from './useTableExpand';
import useTableStyle from './useTableStyle';
import useTableDrag from './useTableDrag';
import useTableSort from './useTableSort';

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
let tableIdSeed = 1;
var useTable = (props, ctx) => {
  const tableId = `f-table_${tableIdSeed++}`;
  const columnState = useTableColumn(props);

  // 展示的数据
  const showData = ref([]);
  const sortState = useTableSort({
    ctx,
    columns: columnState.columns
  });
  watch([() => props.data, sortState.sortState], () => {
    if (isArray(props.data)) {
      showData.value = sortState.handleRowDataBySort(props.data.slice(0), sortState.sortState);
    } else {
      console.warn(`[${TABLE_NAME}]: data must be array`);
      showData.value = [];
    }
  }, {
    immediate: true,
    deep: true
  });

  // 行数据的key
  const getRowKey$1 = _ref => {
    let {
      row
    } = _ref;
    return getRowKey({
      row,
      rowKey: props.rowKey
    });
  };
  const eventState = useTableEvent(ctx);
  const expandState = useTableExpand({
    props,
    ctx,
    columns: columnState.columns,
    getRowKey: getRowKey$1
  });
  const styleState = useTableStyle({
    props,
    columns: columnState.columns,
    columnsFixed: columnState.columnsFixed,
    expandColumn: expandState.expandColumn,
    isExpandOpened: expandState.isExpandOpened,
    showData
  });
  const selectState = useTableSelect({
    props,
    ctx,
    showData,
    getRowKey: getRowKey$1,
    columns: columnState.columns
  });
  const dragState = useTableDrag({
    props,
    ctx
  });
  const state = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
    rootProps: props,
    rootCtx: ctx,
    getRowKey: getRowKey$1,
    getCellValue,
    tableId,
    showData
  }, columnState), eventState), expandState), styleState), selectState), dragState), sortState);
  provide(provideKey, state);
  return state;
};

export { useTable as default };