style(form): 优化表格功能按钮显示

packages/form/src/containers/Table.vue

@@ -120,10 +120,13 @@
       </TMagicTable>
     </TMagicTooltip>
     <slot></slot>
+
+    <div style="display: flex; justify-content: space-between; margin: 10px 0">
       <TMagicButton v-if="addable" size="small" type="primary" :disabled="disabled" plain @click="newHandler()"
         >新增一行</TMagicButton
       >
-    &nbsp;
+
+      <div style="display: flex">
         <TMagicButton
           :icon="Grid"
           size="small"
@@ -150,11 +153,13 @@
           :on-change="excelHandler"
           :auto-upload="false"
         >
-      <TMagicButton size="small" type="success" :disabled="disabled" plain>导入EXCEL</TMagicButton> </TMagicUpload
-    >&nbsp;
+          <TMagicButton size="small" type="success" :disabled="disabled" plain>导入EXCEL</TMagicButton>
+        </TMagicUpload>
         <TMagicButton v-if="importable" size="small" type="warning" :disabled="disabled" plain @click="clearHandler()"
           >清空</TMagicButton
         >
+      </div>
+    </div>
 
     <div class="bottom" style="text-align: right" v-if="config.pagination">
       <TMagicPagination
@@ -371,10 +376,6 @@ const newHandler = async (row?: any) => {
   emit('change', props.model[modelName.value]);
 };
 
-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);
@@ -535,10 +536,15 @@ const clearHandler = () => {
   mForm?.$emit('field-change', props.prop, props.model[modelName.value]);
 };
 
-const excelHandler = (file: any) => {
+const excelHandler = async (file: any) => {
   if (!file?.raw) {
     return false;
   }
+
+  if (!(globalThis as any).XLSX) {
+    await asyncLoadJs('https://cdn.bootcdn.net/ajax/libs/xlsx/0.17.0/xlsx.full.min.js');
+  }
+
   const reader = new FileReader();
   reader.onload = () => {
     const data = reader.result;