From cff84889a604b61684b6a09cee12a7deab9f2edb Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Tue, 11 Jun 2024 13:48:41 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=95=B0=E6=8D=AE=E9=9B=86):=20=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E9=9B=86=E6=95=B0=E6=8D=AE=E9=A2=84=E8=A7=88=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E5=B8=8C=E6=9C=9B=E6=94=AF=E6=8C=81=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E5=AE=BD=E5=BA=A6=20#10145=20=20=20#9769?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../visualized/data/dataset/form/index.vue    | 46 +++++++++++++------
 .../views/visualized/data/dataset/index.vue   | 39 +++++++++++++++-
 2 files changed, 70 insertions(+), 15 deletions(-)

diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/index.vue b/core/core-frontend/src/views/visualized/data/dataset/form/index.vue
index 40d2acbcf0..c71054a0da 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/index.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/index.vue
@@ -1461,21 +1461,39 @@ const getDsIconName = data => {
               </div>
             </div>
             <div class="preview-data">
-              <el-auto-resizer>
-                <template #default="{ height, width }">
-                  <el-table-v2
-                    :columns="columns"
-                    header-class="header-cell"
-                    :data="tableData"
-                    :width="width"
-                    :height="height"
-                    fixed
-                    ><template #empty>
-                      <empty-background description="暂无数据" img-type="noneWhite" />
-                    </template>
-                  </el-table-v2>
+              <el-table
+                v-loading="dataPreviewLoading"
+                header-class="header-cell"
+                :data="tableData"
+                border
+                style="width: 100%; height: 100%"
+              >
+                <el-table-column
+                  :key="column.dataKey"
+                  v-for="(column, index) in columns"
+                  :prop="column.dataKey"
+                  :label="column.title"
+                  :width="columns.length - 1 === index ? 150 : auto"
+                  :fixed="columns.length - 1 === index ? 'right' : false"
+                >
+                  <template #header>
+                    <div class="flex-align-center">
+                      <ElIcon style="margin-right: 6px">
+                        <Icon
+                          :name="`field_${fieldType[column.deType]}`"
+                          :className="`field-icon-${fieldType[column.deType]}`"
+                        ></Icon>
+                      </ElIcon>
+                      <span class="ellipsis" :title="column.title" style="width: 120px">
+                        {{ column.title }}
+                      </span>
+                    </div>
+                  </template>
+                </el-table-column>
+                <template #empty>
+                  <empty-background description="暂无数据" img-type="noneWhite" />
                 </template>
-              </el-auto-resizer>
+              </el-table>
             </div>
           </div>
           <div v-show="tabActive !== 'preview' && !!allfields.length" class="batch-area">
diff --git a/core/core-frontend/src/views/visualized/data/dataset/index.vue b/core/core-frontend/src/views/visualized/data/dataset/index.vue
index eb7842987c..90ddcc8499 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/index.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/index.vue
@@ -760,9 +760,10 @@ const getMenuList = (val: boolean) => {
           </div>
           <template v-if="['dataPreview', 'structPreview'].includes(activeName)">
             <div class="info-table" :class="[{ 'struct-preview': activeName === 'structPreview' }]">
-              <el-auto-resizer>
+              <el-auto-resizer v-if="activeName === 'structPreview'">
                 <template #default="{ height, width }">
                   <el-table-v2
+                    key="structPreview"
                     :columns="columns"
                     v-loading="dataPreviewLoading"
                     header-class="header-cell"
@@ -775,6 +776,42 @@ const getMenuList = (val: boolean) => {
                   ></el-table-v2>
                 </template>
               </el-auto-resizer>
+              <template v-if="activeName === 'dataPreview'">
+                <el-table
+                  v-loading="dataPreviewLoading"
+                  header-class="header-cell"
+                  :data="tableData"
+                  key="dataPreview"
+                  border
+                  style="width: 100%; height: 100%"
+                >
+                  <el-table-column
+                    :key="column.dataKey"
+                    v-for="(column, index) in columns"
+                    :prop="column.dataKey"
+                    :label="column.title"
+                    :width="columns.length - 1 === index ? 150 : auto"
+                    :fixed="columns.length - 1 === index ? 'right' : false"
+                  >
+                    <template #header>
+                      <div class="flex-align-center">
+                        <ElIcon style="margin-right: 6px">
+                          <Icon
+                            :name="`field_${fieldType[column.deType]}`"
+                            :className="`field-icon-${fieldType[column.deType]}`"
+                          ></Icon>
+                        </ElIcon>
+                        <span class="ellipsis" :title="column.title" style="width: 120px">
+                          {{ column.title }}
+                        </span>
+                      </div>
+                    </template>
+                  </el-table-column>
+                  <template #empty>
+                    <empty-background description="暂无数据" img-type="noneWhite" />
+                  </template>
+                </el-table>
+              </template>
             </div>
           </template>
           <template v-if="['row', 'column'].includes(activeName)">