From c7e2c559960dc03710b85542fa7e775d8ff7b4a9 Mon Sep 17 00:00:00 2001
From: Soybean <soybeanjs@outlook.com>
Date: Fri, 23 Feb 2024 22:17:31 +0800
Subject: [PATCH] fix(projects): fix table x-scroll. fixed #324

---
 src/views/manage/menu/index.vue | 6 ++++--
 src/views/manage/role/index.vue | 2 +-
 src/views/manage/user/index.vue | 2 +-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/views/manage/menu/index.vue b/src/views/manage/menu/index.vue
index 4d43263ad..094b92b85 100644
--- a/src/views/manage/menu/index.vue
+++ b/src/views/manage/menu/index.vue
@@ -14,6 +14,8 @@ import MenuOperateDrawer, { type OperateType } from './modules/menu-operate-draw
 const appStore = useAppStore();
 const { bool: drawerVisible, setTrue: openDrawer } = useBoolean();
 
+const wrapperRef = ref<HTMLElement | null>(null);
+
 const { columns, filteredColumns, data, loading, pagination, getData } = useTable<
   Api.SystemManage.Menu,
   typeof fetchGetMenuList,
@@ -224,7 +226,7 @@ async function handleDelete(id: number) {
 </script>
 
 <template>
-  <div class="flex-vertical-stretch gap-16px overflow-hidden <sm:overflow-auto">
+  <div ref="wrapperRef" class="flex-vertical-stretch gap-16px overflow-hidden <sm:overflow-auto">
     <NCard :title="$t('page.manage.menu.title')" :bordered="false" size="small" class="card-wrapper sm:flex-1-hidden">
       <template #header-extra>
         <TableHeaderOperation
@@ -242,7 +244,7 @@ async function handleDelete(id: number) {
         :data="data"
         size="small"
         :flex-height="!appStore.isMobile"
-        :scroll-x="640"
+        :scroll-x="1088"
         :loading="loading"
         :pagination="pagination"
         :row-key="item => item.id"
diff --git a/src/views/manage/role/index.vue b/src/views/manage/role/index.vue
index 316d3e6f6..261720cc9 100644
--- a/src/views/manage/role/index.vue
+++ b/src/views/manage/role/index.vue
@@ -177,7 +177,7 @@ function getIndex(index: number) {
         :data="data"
         size="small"
         :flex-height="!appStore.isMobile"
-        :scroll-x="640"
+        :scroll-x="702"
         :loading="loading"
         :pagination="pagination"
         :row-key="item => item.id"
diff --git a/src/views/manage/user/index.vue b/src/views/manage/user/index.vue
index cd35e6d6d..356d4abaf 100644
--- a/src/views/manage/user/index.vue
+++ b/src/views/manage/user/index.vue
@@ -207,7 +207,7 @@ function getIndex(index: number) {
         :data="data"
         size="small"
         :flex-height="!appStore.isMobile"
-        :scroll-x="640"
+        :scroll-x="962"
         :loading="loading"
         :pagination="pagination"
         :row-key="item => item.id"