create-meadminjs 1.0.0

package/template/meadmin/view/admin/src/components/meUpload.vue

@@ -0,0 +1,114 @@
+<template>
+  <el-upload
+    v-bind="omit(attrs, 'fileList', 'httpRequest', 'onPreview', 'onSuccess', 'onRemove')"
+    :ref="changeRef"
+    class="me-upload"
+    :file-list="fileList"
+    :http-request="handleHttpRequest"
+    @preview="handlePictureCardPreview"
+    @success="handleSuccess"
+    @remove="handleRemove"
+    @exceed="handleExceed"
+  >
+    <template v-for="(_, name) in $slots" #[name]="data">
+      <slot :name="name" v-bind="data || {}"></slot>
+    </template>
+    <template v-if="!$slots.default && !$slots.trigger">
+      <el-icon v-if="(attrs['list-type'] || attrs.listType) === 'picture-card'"><mel-icon-plus /></el-icon>
+      <el-button v-else type="primary">{{ $t('上传') }}</el-button>
+    </template>
+    <el-button v-if="showSelect" @click.stop="openSelectFile()">{{ $t('选择') }}</el-button>
+  </el-upload>
+</template>
+<script lang="ts" name="MeUpload" setup>
+import { FileInfo } from '@/api/file';
+import { useMeSelectFile } from '@/components/meSelectFile/meSelectFile.js';
+import { useLocalesI18n } from '@/locales/hooks';
+import { fileUpload } from '@/utils/fileUpload';
+import { snakeToCamelCaseObj } from '@/utils/formatting.js';
+import { isImage } from '@/utils/helper';
+import { UploadFile, UploadFiles, UploadInstance, UploadRequestHandler, UploadRequestOptions, UploadUserFile } from 'element-plus';
+import { omit } from 'lodash-es';
+import { createImageViewer } from './service/meImageViewer';
+let { t } = useLocalesI18n();
+const attrs = snakeToCamelCaseObj(useAttrs());
+defineOptions({ inheritAttrs: false });
+const { showSelect = true } = defineProps<{
+  showSelect?: boolean;
+}>();
+const fileList = defineModel<(FileInfo & { uid?: number })[]>({ default: () => [] });
+//预览图片
+const handlePictureCardPreview = (uploadFile: UploadFile) => {
+  const url = (uploadFile.url ?? fileList.value.find((item) => item.uid && item.uid === uploadFile.uid)?.url) || '';
+  if (!isImage(url)) {
+    return window.open(url, '_blank');
+  }
+  const urlList = fileList.value.map((item) => item.url).filter((v) => isImage(v));
+  let index = urlList.findIndex((item) => item === url);
+  if (index === -1) {
+    urlList.unshift(url);
+    index = 0;
+  }
+  createImageViewer({
+    urlList: urlList,
+    initialIndex: index,
+    showProgress: true,
+  });
+};
+//上传请求
+const handleHttpRequest = (options: UploadRequestOptions) => {
+  return attrs.httpRequest ? (attrs.httpRequest as UploadRequestHandler)(options) : fileUpload(options);
+};
+const handleSuccess = (response: FileInfo & { uid?: number }, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
+  response.uid = uploadFile.uid;
+  fileList.value.push(response);
+  fileList.value = [...fileList.value];
+  if (attrs.onSuccess) {
+    (attrs as any).onSuccess(response, uploadFile, uploadFiles);
+  }
+};
+const handleRemove = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
+  fileList.value = [...(uploadFiles as unknown as (FileInfo & { uid?: number })[])];
+  if (attrs.onRemove) {
+    (attrs as any).onRemove(uploadFile, uploadFiles);
+  }
+};
+const vm = getCurrentInstance();
+const upload = ref<UploadInstance | null>();
+function changeRef(ref: Element | ComponentPublicInstance | null) {
+  if (vm) {
+    //暴露elUpload属性
+    vm.exposed = ref;
+    upload.value = ref as UploadInstance;
+  }
+}
+//超出时
+const handleExceed = (files: Array<File | FileInfo>, uploadFiles?: UploadUserFile[]) => {
+  if (attrs.onExceed) {
+    (attrs as any).onExceed(files, uploadFiles);
+  }
+  ElMessage({ type: 'error', message: t('最多上传{num}个文件', { num: attrs.limit }) });
+};
+const { open } = useMeSelectFile();
+const openSelectFile = () => {
+  open({
+    onSelected(file) {
+      if (attrs.limit && fileList.value.length >= (attrs.limit as number)) {
+        return handleExceed([file]);
+      }
+      fileList.value.push(file);
+      fileList.value = [...fileList.value];
+      if (attrs.onSuccess) {
+        (attrs as any).onSuccess(file);
+      }
+    },
+  });
+};
+//声明类型
+defineExpose({} as UploadInstance);
+</script>
+<style lang="scss" scoped>
+.me-upload {
+  width: 100%;
+}
+</style>

package/template/meadmin/view/admin/src/components/meUploadUserFile.vue

@@ -0,0 +1,114 @@
+<template>
+  <el-upload
+    v-bind="omit(attrs, 'fileList', 'httpRequest', 'onPreview', 'onSuccess', 'onRemove')"
+    :ref="changeRef"
+    class="me-upload-user-file"
+    :file-list="fileList"
+    :http-request="handleHttpRequest"
+    @preview="handlePictureCardPreview"
+    @success="handleSuccess"
+    @remove="handleRemove"
+    @exceed="handleExceed"
+  >
+    <template v-for="(_, name) in $slots" #[name]="data">
+      <slot :name="name" v-bind="data || {}"></slot>
+    </template>
+    <template v-if="!$slots.default && !$slots.trigger">
+      <el-icon v-if="(attrs['list-type'] || attrs.listType) === 'picture-card'"><mel-icon-plus /></el-icon>
+      <el-button v-else type="primary">{{ $t('上传') }}</el-button>
+    </template>
+    <el-button v-if="showSelect" @click.stop="openSelectFile()">{{ $t('选择') }}</el-button>
+  </el-upload>
+</template>
+<script lang="ts" name="MeUpload" setup>
+import { UserFileInfo } from '@/api/userFile.js';
+import { useMeSelectUserFile } from '@/components/meSelectUserFile/meSelectUserFile.js';
+import { useLocalesI18n } from '@/locales/hooks';
+import { snakeToCamelCaseObj } from '@/utils/formatting.js';
+import { isImage } from '@/utils/helper';
+import { fileUpload } from '@/utils/userFileUpload';
+import { UploadFile, UploadFiles, UploadInstance, UploadRequestHandler, UploadRequestOptions, UploadUserFile } from 'element-plus';
+import { omit } from 'lodash-es';
+import { createImageViewer } from './service/meImageViewer';
+let { t } = useLocalesI18n();
+const attrs = snakeToCamelCaseObj(useAttrs());
+defineOptions({ inheritAttrs: false });
+const { showSelect = true } = defineProps<{
+  showSelect?: boolean;
+}>();
+const fileList = defineModel<(UserFileInfo & { uid?: number })[]>({ default: () => [] });
+//预览图片
+const handlePictureCardPreview = (uploadFile: UploadFile) => {
+  const url = (uploadFile.url ?? fileList.value.find((item) => item.uid && item.uid === uploadFile.uid)?.url) || '';
+  if (!isImage(url)) {
+    return window.open(url, '_blank');
+  }
+  const urlList = fileList.value.map((item) => item.url).filter((v) => isImage(v));
+  let index = urlList.findIndex((item) => item === url);
+  if (index === -1) {
+    urlList.unshift(url);
+    index = 0;
+  }
+  createImageViewer({
+    urlList: urlList,
+    initialIndex: index,
+    showProgress: true,
+  });
+};
+//上传请求
+const handleHttpRequest = (options: UploadRequestOptions) => {
+  return attrs.httpRequest ? (attrs.httpRequest as UploadRequestHandler)(options) : fileUpload(options);
+};
+const handleSuccess = (response: UserFileInfo & { uid?: number }, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
+  response.uid = uploadFile.uid;
+  fileList.value.push(response);
+  fileList.value = [...fileList.value];
+  if (attrs.onSuccess) {
+    (attrs as any).onSuccess(response, uploadFile, uploadFiles);
+  }
+};
+const handleRemove = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
+  fileList.value = [...(uploadFiles as unknown as (UserFileInfo & { uid?: number })[])];
+  if (attrs.onRemove) {
+    (attrs as any).onRemove(uploadFile, uploadFiles);
+  }
+};
+const vm = getCurrentInstance();
+const upload = ref<UploadInstance | null>();
+function changeRef(ref: Element | ComponentPublicInstance | null) {
+  if (vm) {
+    //暴露elUpload属性
+    vm.exposed = ref;
+    upload.value = ref as UploadInstance;
+  }
+}
+//超出时
+const handleExceed = (files: Array<File | UserFileInfo>, uploadFiles?: UploadUserFile[]) => {
+  if (attrs.onExceed) {
+    (attrs as any).onExceed(files, uploadFiles);
+  }
+  ElMessage({ type: 'error', message: t('最多上传{num}个文件', { num: attrs.limit }) });
+};
+const { open } = useMeSelectUserFile();
+const openSelectFile = () => {
+  open({
+    onSelected(file) {
+      if (attrs.limit && fileList.value.length >= (attrs.limit as number)) {
+        return handleExceed([file]);
+      }
+      fileList.value.push(file);
+      fileList.value = [...fileList.value];
+      if (attrs.onSuccess) {
+        (attrs as any).onSuccess(file);
+      }
+    },
+  });
+};
+//声明类型
+defineExpose({} as UploadInstance);
+</script>
+<style lang="scss" scoped>
+.me-upload-user-file {
+  width: 100%;
+}
+</style>

package/template/meadmin/view/admin/src/components/meVxeTable/components/pagination.vue

@@ -0,0 +1,67 @@
+<template>
+  <el-pagination
+    v-bind="options"
+    :current-page="currentPage"
+    :page-size="pageSize"
+    :layout="pageLayout"
+    :pager-count="pagerCount"
+    @update:current-page="setPage"
+    @update:page-size="setSize"
+  ></el-pagination>
+</template>
+<script lang="ts">
+import { useGlobalStore } from '@/store';
+import { ElPagination } from 'element-plus';
+import { PropType } from 'vue';
+export default defineComponent({
+  name: 'Pagination',
+  props: {
+    options: {
+      type: Object as PropType<
+        {
+          noAutoLayout?: boolean; //关闭手机模式自动更改
+          change: (page: number, size: number) => void; //page或size改变时触发
+        } & ComponentProps<typeof ElPagination>
+      >,
+      required: true,
+    },
+  },
+  setup(props) {
+    const globalStore = useGlobalStore();
+    const pageLayout = computed(() => (!props.options?.noAutoLayout && globalStore.isMobile ? 'prev, pager, next' : props.options?.layout));
+    const pagerCount = computed(() => (!props.options?.noAutoLayout && globalStore.isMobile ? 5 : props.options?.pagerCount));
+    const currentPage = ref(1);
+    watch(
+      () => props.options?.currentPage,
+      (page) => {
+        currentPage.value = page!;
+      },
+      { immediate: true },
+    );
+    const setPage = (page: number) => {
+      currentPage.value = page;
+      props.options?.change(currentPage.value, pageSize.value);
+    };
+    const pageSize = ref(10);
+    watch(
+      () => props.options?.pageSize,
+      (size) => {
+        pageSize.value = size!;
+      },
+      { immediate: true },
+    );
+    const setSize = (size: number) => {
+      pageSize.value = size;
+      props.options?.change(currentPage.value, pageSize.value);
+    };
+    return {
+      pageLayout,
+      pagerCount,
+      currentPage,
+      pageSize,
+      setPage,
+      setSize,
+    };
+  },
+});
+</script>

package/template/meadmin/view/admin/src/components/meVxeTable/directives/resize.ts

@@ -0,0 +1,31 @@
+// 监听元素大小变化的指令
+const map = new WeakMap();
+const ob = new ResizeObserver((entries) => {
+  for (const entry of entries) {
+    // 获取dom元素的回调
+    const handler = map.get(entry.target);
+    //存在回调函数
+    if (handler) {
+      // 将监听的值给回调函数
+      handler({
+        width: entry.borderBoxSize[0].inlineSize,
+        height: entry.borderBoxSize[0].blockSize,
+      });
+    }
+  }
+});
+
+export const Resize = {
+  mounted(el: any, binding: any) {
+    //将dom与回调的关系塞入map
+    map.set(el, binding.value);
+    //监听el元素的变化
+    ob.observe(el);
+  },
+  unmounted(el: any) {
+    //取消监听
+    ob.unobserve(el);
+  },
+};
+
+export default Resize;

package/template/meadmin/view/admin/src/components/meVxeTable/index.vue

@@ -0,0 +1,287 @@
+<template>
+  <div v-resize="getTableHeight" class="me-vxe-table" :class="meClass">
+    <div v-if="toolbar" ref="meVxeToolbarRef" class="me-vxe-toolbar">
+      <div v-if="$slots.search" v-show="showSearch" class="me-vxe-toolbar-search">
+        <slot name="search"></slot>
+      </div>
+      <div class="me-vxe-toolbar-menu">
+        <div class="me-vxe-toolbar-buttons">
+          <el-button v-if="vnodeProps?.onRefresh" @click="$emit('refresh')">
+            <mel-icon-refresh />
+          </el-button>
+          <el-button v-if="vnodeProps?.onAdd" type="primary" @click="$emit('add')">
+            <mel-icon-plus />
+          </el-button>
+          <slot name="buttons"></slot>
+        </div>
+        <div class="me-vxe-toolbar-tools">
+          <el-input
+            v-if="quickSearch !== undefined"
+            :model-value="quickSearch"
+            :placeholder="typeof quickSearchPlaceholder === 'function' ? quickSearchPlaceholder($t) : quickSearchPlaceholder"
+            prefix-icon="mel-icon-search"
+            @update:model-value="$emit('update:quickSearch', $event)"
+            @change="$emit('quickSearch', $event)"
+          />
+          <el-button-group v-if="customColumn || exportMenu?.length || print">
+            <el-popover v-if="customColumn" :teleported="false" placement="bottom" trigger="click" width="auto">
+              <template #reference>
+                <el-button icon="mel-icon-grid" :title="$t('自定义列')" />
+              </template>
+              <template #default>
+                <el-scrollbar max-height="300px" class="popover-scrollbar-y">
+                  <el-tree node-key="id" :default-checked-keys="defaultChecked" :data="collectColumn" default-expand-all :props="elTreeProps" show-checkbox @check-change="checkChange" />
+                </el-scrollbar>
+              </template>
+            </el-popover>
+            <el-popover v-if="exportMenu?.length" pure placement="bottom" trigger="click" popper-class="me-vxe-exportmenu-popover el-dropdown__popper">
+              <template #reference>
+                <el-button icon="mel-icon-download" :title="$t('导出')" />
+              </template>
+              <template #default>
+                <ul class="el-dropdown-menu">
+                  <li v-for="item in exportMenu" :key="item.label" class="el-dropdown-menu__item" @click="handleExport(item.handle, item.filename ?? name!)">
+                    {{ item.label }}
+                  </li>
+                </ul>
+              </template>
+            </el-popover>
+            <el-button v-if="print" icon="mel-icon-printer" :title="$t('打印')" @click="printTable()" />
+            <slot name="tools"></slot>
+          </el-button-group>
+          <el-button v-if="$slots.search" :title="$t('更多筛选')" @click="showSearch = !showSearch">
+            <mel-icon-search></mel-icon-search>
+          </el-button>
+          <slot name="toolsButton"></slot>
+        </div>
+      </div>
+    </div>
+    <div class="me-vxe-body">
+      <vxe-table ref="vxeTableRef" :max-height="tableHeight" v-bind="$attrs">
+        <slot></slot>
+        <template v-if="$slots.loading" #loading>
+          <slot name="loading"></slot>
+        </template>
+        <template v-if="$slots.empty" #empty>
+          <slot name="empty"></slot>
+        </template>
+      </vxe-table>
+    </div>
+    <pagination v-if="paginationOptions" ref="mePaginationRef" :options="paginationOptions" class="pagination me-vxe-footer"></pagination>
+  </div>
+</template>
+<script lang="ts">
+import { TreeNodeData } from 'element-plus/es/components/tree/src/tree.type';
+import { debounce } from 'lodash-es';
+import { ComponentCustomProperties, PropType, useTemplateRef } from 'vue';
+import { VxeTableDefines, VxeTableInstance, VxeTableListeners, VxeTableProps, VxeTablePropTypes } from 'vxe-table';
+import pagination from './components/pagination.vue';
+import resize from './directives/resize';
+import './install';
+import { getFullHight } from './util';
+const props = {
+  meClass: [String, Array] as PropType<string[] | string>,
+  name: {
+    type: String,
+    default: 'meVxeTable',
+  },
+  exportMenu: {
+    type: Array as PropType<
+      {
+        label: string;
+        filename?: string;
+        handle: (vxeTable: VxeTableInstance, filename: string) => void | 'csv' | 'html' | 'xml' | 'txt';
+      }[]
+    >,
+    default: () => [
+      { label: 'csv', handle: 'csv' },
+      { label: 'html', handle: 'html' },
+      { label: 'xml', handle: 'xml' },
+      { label: 'txt', handle: 'txt' },
+    ],
+  },
+  print: {
+    type: [Object, Boolean] as PropType<VxeTablePropTypes.PrintConfig | boolean>,
+    default: () => ({}),
+  },
+  customColumn: {
+    type: Boolean,
+    default: true,
+  },
+  defaultShowSearch: {
+    type: Boolean,
+    default: false,
+  },
+  toolbar: {
+    type: Boolean,
+    default: true,
+  },
+  quickSearch: String,
+  quickSearchPlaceholder: {
+    type: [String, Function] as PropType<string | ((t: ComponentCustomProperties['$t']) => string)>,
+    default: () => (t: ComponentCustomProperties['$t']) => t('快捷搜索'),
+  },
+  paginationOptions: Object as PropType<InstanceType<typeof pagination>['options']>,
+  autoHeight: {
+    type: Boolean,
+    default: true,
+  },
+};
+const emits = ['quickSearch', 'refresh', 'add', 'update:quickSearch'] as unknown as {
+  quickSearch: (searchText: string) => void;
+  refresh: () => void;
+  add: () => void;
+  ['update:quickSearch']: (searchText: string) => void;
+} & Required<VxeTableListeners>;
+export default defineComponent({
+  name: 'MeVxeTable',
+  components: { pagination },
+  directives: { resize },
+  inheritAttrs: false,
+  props: props as unknown as ComponentObjectPropsOptionsFromData<VxeTableProps> & typeof props,
+  emits,
+  setup(props, { expose }) {
+    const vxeTableRef = useTemplateRef<VxeTableInstance>('vxeTableRef');
+    const meVxeToolbarRef = useTemplateRef<HTMLDivElement>('meVxeToolbarRef');
+    const mePaginationRef = useTemplateRef<InstanceType<typeof pagination>>('mePaginationRef');
+    const showSearch = ref(props.defaultShowSearch);
+    const collectColumn = ref([] as VxeTableDefines.ColumnInfo[]);
+    const defaultChecked = ref([] as string[]);
+    const refreshColumn = debounce(() => {
+      vxeTableRef.value?.refreshColumn();
+    }, 500);
+    const checkChange = (data: VxeTableDefines.ColumnInfo, is: boolean) => {
+      data.visible = is;
+      refreshColumn();
+    };
+    onMounted(async () => {
+      await nextTick();
+      await nextTick(); //等两次渲染完成才能获取到列
+      const { collectColumn: origionCollectColumn, fullColumn } = vxeTableRef.value!.getTableColumn();
+      collectColumn.value = origionCollectColumn;
+      defaultChecked.value = fullColumn.reduce((previousValue, currentValue) => {
+        if (currentValue.visible) {
+          previousValue.push(currentValue.id);
+        }
+        return previousValue;
+      }, [] as string[]);
+    });
+    expose({ vxeTableRef });
+    const tableHeight = ref<number>();
+    const getTableHeight = (data: { width: number; height: number }) => {
+      if (props.autoHeight) {
+        const toolbarHeight = meVxeToolbarRef.value ? getFullHight(meVxeToolbarRef.value) : 0;
+        const paginationHeight = mePaginationRef.value?.$el ? getFullHight(mePaginationRef.value?.$el) : 0;
+        tableHeight.value = data.height - toolbarHeight - paginationHeight;
+      }
+    };
+    return {
+      elTreeProps: {
+        label: (item: TreeNodeData) => (item.type === 'seq' ? '#' : item.title),
+        children: 'children',
+      },
+      vxeTableRef,
+      collectColumn,
+      defaultChecked,
+      checkChange,
+      handleExport: (handle: (vxeTable: VxeTableInstance, filename: string) => void | 'csv' | 'html' | 'xml' | 'txt', filename: string) => {
+        if (typeof handle === 'string') {
+          vxeTableRef.value!.exportData({
+            type: handle,
+            filename,
+            data: vxeTableRef.value!.getCheckboxRecords().length ? vxeTableRef.value!.getCheckboxRecords() : undefined,
+          });
+        } else {
+          handle(vxeTableRef.value!, filename);
+        }
+      },
+      printTable: () => {
+        vxeTableRef.value!.print(
+          Object.assign(
+            {
+              sheetName: props.name,
+              data: vxeTableRef.value!.getCheckboxRecords().length ? vxeTableRef.value!.getCheckboxRecords() : undefined,
+            },
+            props.print === true ? {} : props.print,
+          ),
+        );
+      },
+      showSearch,
+      getTableHeight,
+      tableHeight,
+      meVxeToolbarRef,
+      mePaginationRef,
+      vnodeProps: getCurrentInstance()?.vnode.props,
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+.me-vxe-table {
+  $margin-top: 15px;
+  $margin-left: 12px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  .me-vxe-toolbar {
+    margin-top: -$margin-top;
+    margin-bottom: $margin-top;
+    flex-shrink: 0;
+    flex-grow: 0;
+
+    .me-vxe-toolbar-search {
+      margin-top: $margin-top;
+    }
+
+    .me-vxe-toolbar-menu {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: wrap;
+
+      .me-vxe-toolbar-buttons {
+        > {
+          :deep(*) {
+            margin-top: $margin-top;
+          }
+        }
+      }
+
+      .me-vxe-toolbar-tools {
+        margin-top: $margin-top;
+        display: flex;
+        align-items: center;
+
+        > {
+          :deep(*:not(:first-child)) {
+            margin-left: $margin-left;
+          }
+        }
+
+        > .el-button-group {
+          flex-shrink: 0;
+        }
+      }
+    }
+  }
+  .me-vxe-body {
+    flex-shrink: 1;
+  }
+  .pagination {
+    flex-shrink: 0;
+    flex-grow: 0;
+    margin-top: $margin-top;
+    justify-content: center;
+  }
+}
+
+:global(.me-vxe-exportmenu-popover) {
+  width: max-content !important;
+  min-width: unset !important;
+}
+
+:global(.me-vxe-exportmenu-popover .el-dropdown-menu__item:not(.is-disabled):hover) {
+  background-color: var(--el-dropdown-menuItem-hover-fill);
+  color: var(--el-dropdown-menuItem-hover-color);
+}
+</style>

package/template/meadmin/view/admin/src/components/meVxeTable/install.ts

@@ -0,0 +1,30 @@
+import { app } from '@/app';
+import { useSettingStore } from '@/store';
+import { VxeModal, VxeUI } from 'vxe-pc-ui';
+import 'vxe-pc-ui/es/style.css';
+import { VxeColgroup, VxeColumn, VxeGrid, VxeTable, VxeToolbar } from 'vxe-table';
+import VXETablePluginElement from 'vxe-table-plugin-element';
+import 'vxe-table-plugin-element/dist/style.css';
+import 'vxe-table/es/style.css';
+VxeUI.use(VXETablePluginElement);
+if (app?.config?.globalProperties?.$start) {
+  //为了兼容热更新重新拉取
+  VxeUI.setConfig({
+    // 对组件内置的提示语进行国际化翻译
+    i18n: app.config.globalProperties.$t,
+  });
+  app.use(VxeModal);
+  app.use(VxeTable);
+  app.use(VxeColumn);
+  app.use(VxeColgroup);
+  app.use(VxeGrid);
+  app.use(VxeToolbar);
+  const setting = useSettingStore();
+  watch(
+    () => setting.isDark,
+    (val) => {
+      VxeUI.setTheme(val ? 'dark' : 'light');
+    },
+    { immediate: true },
+  );
+}

package/template/meadmin/view/admin/src/components/meVxeTable/util.ts

@@ -0,0 +1,11 @@
+/**
+ * 获取元素的高度包括marign
+ * @param el
+ * @returns
+ */
+export const getFullHight = (el: HTMLDivElement) => {
+  const offsetHeight = el.offsetHeight;
+  const marginTop = window.getComputedStyle(el).marginTop.replace('px', '');
+  const marginBottom = window.getComputedStyle(el).marginBottom.replace('px', '');
+  return offsetHeight + +marginTop + +marginBottom;
+};