feat(form): table新增showIndex配置，用于控制是否显示行索引

Tencent · Sep 20, 2022 · 560a3ac · 560a3ac
1 parent afe1e0f
commit 560a3ac
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 17 deletions.
diff --git a/packages/form/src/containers/Table.vue b/packages/form/src/containers/Table.vue
@@ -76,7 +76,7 @@
             width="45"
           ></el-table-column>
 
-          <el-table-column width="60" label="序号">
+          <el-table-column width="60" label="序号" v-if="showIndex">
             <template v-slot="scope">{{ scope.$index + 1 + pagecontext * pagesize }}</template>
           </el-table-column>
 
@@ -163,12 +163,7 @@ import { asyncLoadJs, sleep } from '@tmagic/utils';
 import { ColumnConfig, FormState, SortProp, TableConfig } from '../schema';
 import { display, initValue } from '../utils/form';
 
-let loadedAMapJS = false; // 是否加载完js
-let firstLoadingAMapJS = true; // 否是第一次请求
-
 export default defineComponent({
-  name: 'm-form-table',
-
   props: {
     name: {
       type: String,
@@ -215,12 +210,17 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
+
+    showIndex: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   emits: ['change', 'select'],
 
   setup(props, { emit }) {
-    let timer: NodeJS.Timeout | null = null;
+    let timer: number | null = null;
     const mForm = inject<FormState | undefined>('mForm');
 
     const elTable = ref<any>();
@@ -348,20 +348,15 @@ export default defineComponent({
       emit('change', props.model[modelName.value]);
     };
 
-    if (!loadedAMapJS && firstLoadingAMapJS && !(globalThis as any).XLSX) {
-      firstLoadingAMapJS = false; // 马上置为false 只让第一个created组件去请求js
-      asyncLoadJs('https://cdn.bootcdn.net/ajax/libs/xlsx/0.17.0/xlsx.full.min.js')
-        .then(() => {
-          loadedAMapJS = true;
-        })
-        .catch(() => {
-          firstLoadingAMapJS = true; // 出错置为true 下次进来还是能重新请求js
-        });
+    if (!(globalThis as any).XLSX) {
+      asyncLoadJs('https://cdn.bootcdn.net/ajax/libs/xlsx/0.17.0/xlsx.full.min.js');
     }
 
     onMounted(() => {
       if (props.config.defautSort) {
         sortChange(props.config.defautSort);
+      } else if (props.config.defaultSort) {
+        sortChange(props.config.defaultSort);
       }
 
       if (props.sort && props.sortKey) {

diff --git a/packages/form/src/index.ts b/packages/form/src/index.ts
@@ -100,7 +100,7 @@ const install = (app: App, opt: any) => {
   app.component(Panel.name, Panel);
   app.component(Row.name, Row);
   app.component(MStep.name, MStep);
-  app.component(Table.name, Table);
+  app.component('m-form-table', Table);
   app.component(Tabs.name, Tabs);
   app.component(Text.name, Text);
   app.component(Number.name, Number);

diff --git a/packages/form/src/schema.ts b/packages/form/src/schema.ts
@@ -573,6 +573,7 @@ export interface TableConfig extends FormItem {
   max?: number;
   maxHeight?: number | string;
   border?: boolean;
+  showIndex?: boolean;
   enum?: any[];
   addable?: (mForm: FormState | undefined, data: any) => boolean | 'undefined' | boolean;
   delete?: (model: any, index: number, values: any) => boolean | boolean;
@@ -581,6 +582,7 @@ export interface TableConfig extends FormItem {
   defaultAdd?: (mForm: FormState | undefined, data: any) => any;
   onSelect?: (mForm: FormState | undefined, data: any) => any;
   defautSort?: SortProp;
+  defaultSort?: SortProp;
   dropSort?: boolean;
   enableFullscreen?: boolean;
   fixed?: boolean;