diff --git a/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue b/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
index 36ad010fea..3a8c5930e9 100644
--- a/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
+++ b/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
@@ -464,8 +464,16 @@ const autoHeightStyle = computed(() => {
 })
 
 const tabStyle = computed(() => [
-  { '--de-pager-color': canvasStyleData.value.component.seniorStyleSetting.pagerColor }
+  { '--de-pager-color': canvasStyleData.value.component.seniorStyleSetting?.pagerColor }
 ])
+
+const tablePageClass = computed(() => {
+  return (
+    ['#ffffff', '#A6A6A6FF'].includes(
+      canvasStyleData.value.component.seniorStyleSetting?.pagerColor
+    ) && 'table-page-info_dark'
+  )
+})
 </script>
 
 <template>
@@ -481,7 +489,7 @@ const tabStyle = computed(() => [
       <div style="position: relative; height: 100%" :id="containerId"></div>
     </div>
     <el-row :style="autoStyle" v-if="showPage && !isError">
-      <div class="table-page-info" :style="tabStyle">
+      <div class="table-page-info" :class="tablePageClass" :style="tabStyle">
         <div>共{{ state.pageInfo.total }}条</div>
         <el-pagination
           v-if="state.pageStyle !== 'general'"
@@ -525,7 +533,13 @@ const tabStyle = computed(() => [
     overflow: hidden;
   }
 }
+
+.table-page-info_dark {
+  --ed-fill-color-blank: #00000000;
+}
+
 .table-page-info {
+  --ed-text-color-regular: var(--de-pager-color);
   position: relative;
   padding-left: 4px;
   margin: 4px;
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 c71054a0da..6c488faf6d 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
@@ -1462,7 +1462,7 @@ const getDsIconName = data => {
             </div>
             <div class="preview-data">
               <el-table
-                v-loading="dataPreviewLoading"
+                v-loading="datasetPreviewLoading"
                 header-class="header-cell"
                 :data="tableData"
                 border
@@ -1473,7 +1473,7 @@ const getDsIconName = data => {
                   v-for="(column, index) in columns"
                   :prop="column.dataKey"
                   :label="column.title"
-                  :width="columns.length - 1 === index ? 150 : auto"
+                  :width="columns.length - 1 === index ? 150 : 'auto'"
                   :fixed="columns.length - 1 === index ? 'right' : false"
                 >
                   <template #header>
@@ -1955,6 +1955,11 @@ const getDsIconName = data => {
 
 <style lang="less" scoped>
 @import '@/style/mixin.less';
+
+.ed-table {
+  --ed-table-header-bg-color: #f5f6f7;
+}
+
 .de-dataset-form {
   color: #1f2329;
   .top {
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 90ddcc8499..6548715469 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/index.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/index.vue
@@ -790,7 +790,7 @@ const getMenuList = (val: boolean) => {
                     v-for="(column, index) in columns"
                     :prop="column.dataKey"
                     :label="column.title"
-                    :width="columns.length - 1 === index ? 150 : auto"
+                    :width="columns.length - 1 === index ? 150 : 'auto'"
                     :fixed="columns.length - 1 === index ? 'right' : false"
                   >
                     <template #header>
@@ -846,6 +846,10 @@ const getMenuList = (val: boolean) => {
 <style lang="less" scoped>
 @import '@/style/mixin.less';
 
+.ed-table {
+  --ed-table-header-bg-color: #f5f6f7;
+}
+
 .filter-icon-span {
   border: 1px solid #bbbfc4;
   width: 32px;