refactor: meTable 类型提示增强，导出字段 elTable改为elTableRef

meadmin-cn · Sep 21, 2022 · 0ca430a · 0ca430a
1 parent 452760d
commit 0ca430a
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 10 deletions.
diff --git a/src/components/meTable/hooks/exportTable.ts b/src/components/meTable/hooks/exportTable.ts
@@ -1,6 +1,6 @@
 import { Defaults, TableExport } from 'tableexport';
 type ExportType = 'csv' | 'txt' | 'xlsx';
-export default (elTable: ELTable, type: ExportType, filename?: string, options?: Defaults) => {
+export default (elTable: ELTableInstance, type: ExportType, filename?: string, options?: Defaults) => {
   const selectionIndexs = elTable.getSelectionIndexs();
   const ignoreRows = [] as number[];
   if (selectionIndexs.length) {

diff --git a/src/components/meTable/index.vue b/src/components/meTable/index.vue
@@ -82,7 +82,7 @@
 </template>
 <script lang="ts">
 import { ElTable } from 'element-plus';
-import { ComponentOptionsMixin, ExtractPropTypes, PropType } from 'vue';
+import { ComponentOptionsMixin, ExtractPropTypes, PropType, Ref } from 'vue';
 import customColumn from './hooks/customColumn';
 import exportTable from './hooks/exportTable';
 import printTable from './hooks/print';
@@ -100,7 +100,7 @@ const props = {
       {
         label: string;
         filename?: string;
-        handle: (elTable: ELTable, filename: string) => void | 'xlsx' | 'csv' | 'txt';
+        handle: (elTable: ELTableInstance, filename: string) => void | 'xlsx' | 'csv' | 'txt';
       }[]
     >,
     default: () => [
@@ -140,7 +140,12 @@ const emits = {
 };
 export default defineComponent<
   ComponentProps<typeof ElTable> & Partial<ExtractPropTypes<typeof props>>,
-  Record<string, any>,
+  {
+    [k: string]: any;
+    elTableRef: Ref<ELTableInstance | undefined>;
+    customColumnProps: Ref<ReturnType<typeof customColumn> | undefined>;
+    searchText: Ref<string>;
+  },
   Record<string, any>,
   Record<string, any>,
   Record<string, any>,
@@ -182,7 +187,7 @@ export default defineComponent<
         customColumnProps.value!.checkedLabels.delete(data.value);
       }
     };
-    const elTableRef = ref<ELTable>();
+    const elTableRef = ref<ELTableInstance>();
     onMounted(() => {
       elTableRef.value!.getSelectionIndexs = function () {
         const index = [] as number[];
@@ -194,7 +199,7 @@ export default defineComponent<
         return index;
       };
     });
-    expose({ elTable: elTableRef, customColumnProps });
+    expose({ elTableRef, customColumnProps, searchText });
     return {
       showSearch,
       searchText,
@@ -205,7 +210,7 @@ export default defineComponent<
       exportTable,
       printTable,
       handleExport: (
-        handle: (elTable: ELTable, filename: string) => void | 'xls' | 'txt' | 'csv',
+        handle: (elTable: ELTableInstance, filename: string) => void | 'xls' | 'txt' | 'csv',
         filename: string,
       ) => {
         if (typeof handle === 'string') {

diff --git a/src/views/components/table/index.vue b/src/views/components/table/index.vue
@@ -56,7 +56,7 @@
         <el-button @click="canDel = !canDel">{{ t('删除切换') }}</el-button>
         <el-button @click="customColumn = !customColumn">{{ t('自定义列') }}</el-button>
         <el-button @click="data = []">{{ t('清空') }}</el-button>
-        <el-button @click="meTableRef!.elTable.toggleAllSelection()">{{ t('全选') }}</el-button>
+        <el-button @click="meTableRef!.elTableRef!.toggleAllSelection()">{{ t('全选') }}</el-button>
       </template>
       <el-table-column type="selection" label="选择" width="55" />
       <el-table-column prop="date" :label="t('日期')"> </el-table-column>
@@ -83,8 +83,7 @@
 import { listApi } from '@/api/table';
 import { useLocalesI18n } from '@/locales/i18n';
 import { FormInstance } from 'element-plus';
-import meTable from '@/components/meTable/index.vue';
-const meTableRef = ref<InstanceType<typeof meTable>>();
+const meTableRef = ref<MeTableInstance>();
 const customColumn = ref(true);
 const { t } = useLocalesI18n({}, [(locale: string) => import(`./lang/${locale}.json`), 'tableLang']);
 const canDel = ref(true);