fix(table): make sure the table width is correct, fix #593

vben
1 parent 8a3f47d6
Showing 3 changed files with 14 additions and 9 deletions
src/components/Table/src/BasicTable.vue
src/components/Tinymce/src/Editor.vue
src/main.ts
@@ -304,6 +304,8 @@
   @prefix-cls: ~'@{namespace}-basic-table';
  
   .@{prefix-cls} {
+    max-width: 100%;
+
     &-row__striped {
       td {
         background-color: @app-content-background;
@@ -12,6 +12,7 @@
 </template>
  
 <script lang="ts">
+  import type { RawEditorSettings } from 'tinymce';
   import tinymce from 'tinymce/tinymce';
   import 'tinymce/themes/silver';
  
@@ -71,7 +72,7 @@
  
   const tinymceProps = {
     options: {
-      type: Object as PropType<any>,
+      type: Object as PropType<Partial<RawEditorSettings>>,
       default: {},
     },
     value: {
@@ -141,7 +142,7 @@
         return ['zh_CN', 'en'].includes(lang) ? lang : 'zh_CN';
       });
  
-      const initOptions = computed(() => {
+      const initOptions = computed((): RawEditorSettings => {
         const { height, options, toolbar, plugins } = props;
         const publicPath = import.meta.env.VITE_PUBLIC_PATH || '/';
         return {
@@ -156,14 +157,15 @@
           default_link_target: '_blank',
           link_title: false,
           object_resizing: false,
+          auto_focus: true,
           skin: skinName.value,
           skin_url: publicPath + 'resource/tinymce/skins/ui/' + skinName.value,
           content_css:
             publicPath + 'resource/tinymce/skins/ui/' + skinName.value + '/content.min.css',
           ...options,
-          setup: (editor: any) => {
+          setup: (editor) => {
             editorRef.value = editor;
-            editor.on('init', (e: Event) => initSetup(e));
+            editor.on('init', (e) => initSetup(e));
           },
         };
       });
@@ -210,7 +212,7 @@
         tinymce.init(unref(initOptions));
       }
  
-      function initSetup(e: Event) {
+      function initSetup(e) {
         const editor = unref(editorRef);
         if (!editor) {
           return;
 import '/@/design/index.less';
+
+// Register windi
 import 'virtual:windi.css';
+// Register icon sprite
+import 'virtual:svg-icons-register';
  
 import { createApp } from 'vue';
 import App from './App.vue';
 import { initAppConfigStore } from '/@/logics/initAppConfig';
+import { setupErrorHandle } from '/@/logics/error-handle';
 import router, { setupRouter } from '/@/router';
 import { setupRouterGuard } from '/@/router/guard';
 import { setupStore } from '/@/store';
-import { setupErrorHandle } from '/@/logics/error-handle';
 import { setupGlobDirectives } from '/@/directives';
 import { setupI18n } from '/@/locales/setupI18n';
 import { registerGlobComp } from '/@/components/registerGlobComp';
  
-// Register icon Sprite
-import 'virtual:svg-icons-register';
-
 // Do not introduce on-demand in local development?
 // In the local development for introduce on-demand, the number of browser requests will increase by about 20%.
 // Which may slow down the browser refresh.