✨ feat<TopSearchTermTable>: 表格合并单元格以及修改分页大小

src/views/searchTerm/topSearchTermRank/column-chart.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /**
  * @Name: column-chart.vue
- * @Description:
+ * @Description: 表格内的折线图
  * @Author: Cheney
  */
 

src/views/searchTerm/topSearchTermTable/index.vue

@@ -5,7 +5,7 @@
  * @Author: Cheney
  */
 
-import { nextTick, onBeforeMount, onMounted, ref, watch } from 'vue';
+import { nextTick, onBeforeMount, ref, watch } from 'vue';
 import { usePagination } from '/@/utils/usePagination';
 import { getTopSearchTermTable, postDownload } from './api';
 import { marketplaceIdEnum } from '/@/utils/marketplaceIdEnum';
@@ -18,7 +18,6 @@ import enLocale from 'element-plus/es/locale/lang/en';
 const router = useRouter();
 
 const { tableData, total, currentPage, pageSize, handlePageChange } = usePagination(fetchTableData);
-
 const marketplaceSelect = ref(marketplaceIdEnum[0].value); // 当前只有美国区 默认第一个为美国
 const marketplaceOptions = marketplaceIdEnum;
 const reportTypeSelect = ref('weekly');
@@ -29,8 +28,8 @@ const downloadLoading = ref(false);
 const date = ref(calculateLastWeek()); // 设置默认日期为上周的周日到周六
 const dateDimension = ref(date.value[0]);
 
-
 onBeforeMount(() => {
+  pageSize.value = 21; // 将usePagination中的pageSize默认修改每页显示21条
   fetchTableData();
 });
 
@@ -40,6 +39,9 @@ watch(dateDimension, () => {
   fetchTableData();
 });
 
+/**
+ * 判断当前时间维度 并 计算起始和结束日期
+ */
 function calculateDate() {
   if (reportTypeSelect.value === 'weekly') {
     date.value[0] = dateDimension.value;
@@ -61,13 +63,17 @@ function calculateLastWeek() {
   return [lastSunday.format('YYYY-MM-DD'), lastSaturday.format('YYYY-MM-DD')];
 }
 
+/**
+ * 计算结束日期
+ * @param startDate el-date-picker组件的value
+ */
 function calculateEndDate(startDate: string) {
   return dayjs(startDate).add(6, 'day').format('YYYY-MM-DD');
 }
 
 async function refreshTable() {
   currentPage.value = 1;
-  pageSize.value = 10;
+  pageSize.value = 21;
   asinInp.value = '';
   searchTermInp.value = '';
   reportTypeSelect.value = 'weekly';
@@ -203,6 +209,18 @@ function getTagStyle(clickShareRank: number): Record<string, string> {
       return { backgroundColor: '#e0e0e0', color: '#000', border: '1px solid #e0e0e0' };
   }
 }
+
+function arraySpanMethod({ row, column, rowIndex, columnIndex }) {
+  // 每三个合并为一个单元格
+  if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
+    if (rowIndex % 3 === 0) {
+      return [3, 1]; // 跨越三行
+    } else {
+      return [0, 0]; // 被合并的单元格
+    }
+  }
+  return [1, 1];
+}
 </script>
 
 <template>
@@ -282,9 +300,7 @@ function getTagStyle(clickShareRank: number): Record<string, string> {
               :popper-options="{ placement: 'bottom-end' }"
               :disabled-date="(time: Date) => time > new Date()"
               :clearable="false">
-              <template #default>
-                123
-              </template>
+              <template #default> 123</template>
             </el-date-picker>
           </el-config-provider>
         </div>
@@ -307,8 +323,10 @@ function getTagStyle(clickShareRank: number): Record<string, string> {
     <!-- table -->
     <el-card shadow="never" class="mt-5">
       <div style="height: 795px; overflow: auto">
-        <el-table :data="tableData" height="795" stripe style="width: 100%">
-          <el-table-column fixed prop="searchTerm" label="搜索词" width="260">
+        <el-table :data="tableData" :span-method="arraySpanMethod" height="795" stripe style="width: 100%">
+          <!-- 保持索引是1, 2, 3的顺序 不会收到合并单元格的影响 -->
+          <el-table-column fixed type="index" width="50" :index="(index) => Math.floor(index / 3) + 1" />
+          <el-table-column prop="searchTerm" label="搜索词" width="260">
             <template #header>
               <el-icon style="top: 2px; margin-right: 3px">
                 <Key />
@@ -341,24 +359,34 @@ function getTagStyle(clickShareRank: number): Record<string, string> {
             </template>
             <template #default="{ row }">
               <div class="font-medium" style="color: black">{{ row.clickedAsin }}</div>
+              <!--<div class="text-sm text-left">-->
+              <!--  <el-tooltip class="box-item" effect="dark" :content="row.clickedItemName" placement="top-start" :show-after="500">-->
+              <!--    <div class="tooltip-text">-->
+              <!--      <span class="font-medium mr-1">Title:</span>-->
+              <!--      {{ row.clickedItemName }}-->
+              <!--    </div>-->
+              <!--  </el-tooltip>-->
+              <!--</div>-->
+            </template>
+          </el-table-column>
+          <el-table-column prop="clickedItemName" label="标题">
+            <template #header>
+              <el-icon style="top: 2px; margin-right: 5px">
+                <Reading />
+              </el-icon>
+              <span>标题</span>
+            </template>
+            <template #default="{ row }">
               <div class="text-sm text-left">
-                <el-tooltip class="box-item" effect="dark" :content="row.clickedItemName" placement="top-start">
+                <el-tooltip class="box-item" effect="dark" :content="row.clickedItemName" placement="top" :show-after="500">
                   <div class="tooltip-text">
-                    <span class="font-medium mr-1">Title:</span>
+                    <!--<span class="font-medium mr-1">Title:</span>-->
                     {{ row.clickedItemName }}
                   </div>
                 </el-tooltip>
               </div>
             </template>
           </el-table-column>
-          <!--<el-table-column prop="clickedItemName" label="标题">-->
-          <!--  <template #header>-->
-          <!--    <el-icon style="top: 2px; margin-right: 5px">-->
-          <!--      <Reading />-->
-          <!--    </el-icon>-->
-          <!--    <span>标题</span>-->
-          <!--  </template>-->
-          <!--</el-table-column>-->
           <el-table-column prop="clickShareRank" label="点击分享率排名" align="center" width="150">
             <template #header>
               <el-icon style="top: 2px; margin-right: 4px">
@@ -401,7 +429,7 @@ function getTagStyle(clickShareRank: number): Record<string, string> {
         <el-pagination
           v-model:current-page="currentPage"
           v-model:page-size="pageSize"
-          :page-sizes="[10, 20, 30, 50, 100, 200]"
+          :page-sizes="[21, 42, 72, 102, 132, 162]"
           layout="sizes, prev, pager, next"
           :total="total"
           @change="handlePageChange" />
@@ -418,7 +446,7 @@ function getTagStyle(clickShareRank: number): Record<string, string> {
 .tooltip-text {
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
+  -webkit-line-clamp: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: normal;