全局表格替换自定义表格组件

apps/web-vue/src/components/Table/indedx.vue

 <template>
     <div class="common-table-wrapper">
         <!-- 1. 表格主体 -->
-        <el-table :data="tableData" style="width: 100%" :border="border" :size="size" :stripe="stripe" v-loading="loading"
-            @selection-change="handleSelectionChange">
+        <el-table :data="tableData" style="width: 100%" :border="border" :size="size" :stripe="stripe"
+            :row-key="rowKey || undefined" v-loading="loading" @selection-change="handleSelectionChange">
 
             <!-- 默认插槽：让父组件自定义列 -->
             <slot></slot>
@@ -14,7 +14,7 @@
         </el-table>
 
         <!-- 2. 分页组件 -->
-        <div class="pagination-container">
+        <div v-if="showPagination" class="pagination-container">
             <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :size="size"
                 :page-sizes="[10, 20, 50, 100]" :background="true" layout="total, sizes, prev, pager, next, jumper"
                 :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
@@ -58,6 +58,14 @@ const props = defineProps({
     size: {
         type: String,
         default: ''
+    },
+    showPagination: {
+        type: Boolean,
+        default: true,
+    },
+    rowKey: {
+        type: [String, Function],
+        default: '',
     }
 });
 
@@ -136,4 +144,4 @@ defineExpose({
     justify-content: flex-end;
     margin-top: 16px;
 }
-</style>
+</style>
\ No newline at end of file

apps/web-vue/src/views/analysis/components/AD/Tab1.vue

@@ -56,7 +56,7 @@
 
             <el-alert v-if="settingVisible" class="mb-10" title="已打开字段配置面板" type="info" show-icon :closable="false" />
 
-            <el-table v-if="metric === '直播间汇总'" :data="pagedRows" class="analysis-table" row-key="room">
+            <SeTable v-if="metric === '直播间汇总'" :data-list="pagedRows" class="analysis-table" :total="currentTableRows.length" :default-page-size="pageData.pageSize" @update:page="handleTablePageChange">
                 <el-table-column fixed prop="room" label="直播间" min-width="200" show-overflow-tooltip />
                 <el-table-column prop="owner" label="负责人" width="130" align="center" />
                 <el-table-column prop="cost" label="消耗 ↑↓" width="140" align="center">
@@ -73,9 +73,9 @@
                 <el-table-column prop="rate" label="转化率" width="120" align="center" />
                 <el-table-column prop="unitCost" label="转化成本" width="130" align="center" />
                 <el-table-column prop="show" label="展示数" width="150" align="center" />
-            </el-table>
+            </SeTable>
 
-            <el-table v-else-if="metric === '人员数据'" :data="pagedRows" class="analysis-table" row-key="name">
+            <SeTable v-else-if="metric === '人员数据'" :data-list="pagedRows" class="analysis-table" :total="currentTableRows.length" :default-page-size="pageData.pageSize" @update:page="handleTablePageChange">
                 <el-table-column fixed prop="name" label="人员名称" min-width="220">
                     <template #default="{ row }"><span :class="row.link ? 'link-text font-bold' : 'font-bold'">{{
                         row.name }}</span></template>
@@ -94,9 +94,9 @@
                 <el-table-column prop="conversion" label="转化数" min-width="120" align="center" />
                 <el-table-column prop="rate" label="转化率" min-width="120" align="center" />
                 <el-table-column prop="unitCost" label="转化成本" min-width="130" align="center" />
-            </el-table>
+            </SeTable>
 
-            <el-table v-else-if="metric === '分类数据'" :data="pagedRows" class="analysis-table" row-key="firstCategory">
+            <SeTable v-else-if="metric === '分类数据'" :data-list="pagedRows" class="analysis-table" :total="currentTableRows.length" :default-page-size="pageData.pageSize" @update:page="handleTablePageChange">
                 <el-table-column fixed prop="firstCategory" label="一级分类" min-width="180" />
                 <el-table-column prop="secondCategory" label="二级分类" min-width="200" />
                 <el-table-column prop="accountCount" label="关联账户数" min-width="130" align="center" />
@@ -111,9 +111,9 @@
                 <el-table-column prop="amount" label="成交金额" min-width="150" align="center" />
                 <el-table-column prop="coupon" label="智能优惠券" min-width="150" align="center" />
                 <el-table-column prop="conversion" label="转化数" min-width="120" align="center" />
-            </el-table>
+            </SeTable>
 
-            <el-table v-else :data="pagedRows" class="analysis-table" row-key="account">
+            <SeTable v-else :data-list="pagedRows" class="analysis-table" :total="currentTableRows.length" :default-page-size="pageData.pageSize" @update:page="handleTablePageChange">
                 <el-table-column fixed prop="account" label="广告账户" min-width="240">
                     <template #default="{ row }">
                         <div class="font-bold">{{ row.account }}</div>
@@ -147,13 +147,7 @@
                 </el-table-column>
                 <el-table-column prop="amount" label="成交金额" min-width="150" align="center" />
                 <el-table-column prop="coupon" label="智能优惠券" min-width="150" align="center" />
-            </el-table>
-
-            <div class="table-footer">
-                <el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
-                    background layout="total, sizes, prev, pager, next, jumper" :total="currentTableRows.length"
-                    :page-sizes="pageData.pageSizes" @size-change="handleSizeChange" />
-            </div>
+            </SeTable>
         </el-card>
     </div>
 </template>
@@ -263,8 +257,9 @@ const setMetric = (value: string) => {
     metric.value = value;
     pageData.currentPage = 1;
 };
-const handleSizeChange = () => {
-    pageData.currentPage = 1;
+const handleTablePageChange = (page: number, size: number) => {
+    pageData.currentPage = page;
+    pageData.pageSize = size;
 };
 </script>
 

apps/web-vue/src/views/analysis/components/AD/Tab2.vue

@@ -38,7 +38,7 @@
                 <el-button @click="exportData">导出</el-button>
             </div>
 
-            <el-table :data="pagedRows" class="analysis-table" row-key="name">
+            <SeTable :data-list="pagedRows" class="analysis-table" :total="tableRows.length" :default-page-size="pageData.pageSize" @update:page="handleTablePageChange">
                 <el-table-column fixed prop="name" label="广告账户" min-width="220">
                     <template #default="{ row }">
                         <div class="font-bold">{{ row.name }}</div>
@@ -81,13 +81,7 @@
                 <el-table-column prop="standardCost" label="标准消耗" width="130" align="right" />
                 <el-table-column prop="globalCost" label="全域消耗" width="130" align="right" />
                 <el-table-column prop="remark" label="备注" width="100" align="center" />
-            </el-table>
-
-            <div class="flex justify-end">
-                <el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
-                    background layout="total, sizes, prev, pager, next, jumper" :total="tableRows.length"
-                    :page-sizes="pageData.pageSizes" @size-change="handleSizeChange" />
-            </div>
+            </SeTable>
         </el-card>
     </div>
 </template>
@@ -134,8 +128,9 @@ const reset = () => {
     category.value = '';
     date.value = '';
 };
-const handleSizeChange = () => {
-    pageData.currentPage = 1;
+const handleTablePageChange = (page: number, size: number) => {
+    pageData.currentPage = page;
+    pageData.pageSize = size;
 };
 </script>
 

apps/web-vue/src/views/analysis/components/AD/Tab3.vue

@@ -48,7 +48,7 @@
                 <el-button class="w-34 p-0" @click="settingVisible = !settingVisible">☷</el-button>
             </div>
             <el-alert v-if="settingVisible" class="mb-10" title="已打开字段配置面板" type="info" show-icon :closable="false" />
-            <el-table :data="tableRows" class="analysis-table" row-key="department">
+            <SeTable :data-list="tableRows" class="analysis-table" :total="tableRows.length" :default-page-size="10">
                 <el-table-column prop="department" label="部门" min-width="260">
                     <template #default="{ row }"><span :class="row.link ? 'link-text font-bold' : 'font-bold'">{{ row.department }}</span></template>
                 </el-table-column>
@@ -62,7 +62,7 @@
                 <el-table-column prop="deleted" label="已删除 ↑↓" align="center">
                     <template #default="{ row }"><span class="color-8aa">{{ row.deleted }}</span></template>
                 </el-table-column>
-            </el-table>
+            </SeTable>
             <div class="scroll-bar mt-14"></div>
         </el-card>
     </div>

apps/web-vue/src/views/analysis/components/AD/Tab4.vue

@@ -64,7 +64,7 @@
                 <el-button type="primary" @click="exportData">导出</el-button>
             </div>
 
-            <el-table :data="tableRows" class="analysis-table" row-key="name">
+            <SeTable :data-list="tableRows" class="analysis-table" :total="tableRows.length" :default-page-size="10">
                 <el-table-column label="店铺" align="center">
                     <el-table-column prop="name" label="名称" min-width="260" />
                     <el-table-column prop="code" label="code" min-width="180" />
@@ -79,7 +79,7 @@
                     <el-table-column prop="payoutProcessing" label="Processing 待入账" min-width="160" align="right" />
                     <el-table-column prop="payoutFailed" label="Failed 入账失败" min-width="150" align="right" />
                 </el-table-column>
-            </el-table>
+            </SeTable>
         </el-card>
     </div>
 </template>

apps/web-vue/src/views/analysis/components/Team/Tab2.vue

@@ -60,7 +60,7 @@
             </div>
         </div>
         <el-alert v-if="fieldVisible" class="mb-10" title="已打开字段配置面板" type="info" show-icon :closable="false" />
-        <el-table :data="tableRows" class="analysis-table" row-key="department">
+        <SeTable :data-list="tableRows" class="analysis-table" :total="tableRows.length" :default-page-size="10" row-key="department">
             <el-table-column prop="date" label="数据时间" min-width="190" />
             <el-table-column prop="department" label="部门名称" min-width="160">
                 <template #default="{ row }"><span class="color-main font-bold">{{ row.department }}</span></template>
@@ -75,7 +75,7 @@
             <el-table-column prop="viral" label="爆款视频数 ↑↓" align="center">
                 <template #default="{ row }"><span class="color-8aa">{{ row.viral }}</span></template>
             </el-table-column>
-        </el-table>
+        </SeTable>
     </div>
 </template>
 

apps/web-vue/src/views/analysis/components/Team/Tab3.vue

@@ -61,7 +61,7 @@
             </div>
         </div>
         <el-alert v-if="fieldVisible" class="mb-10" title="已打开字段配置面板" type="info" show-icon :closable="false" />
-        <el-table :data="tableRows" class="analysis-table" row-key="department">
+        <SeTable :data-list="tableRows" class="analysis-table" :total="tableRows.length" :default-page-size="10" row-key="department">
             <el-table-column prop="department" label="部门名称" min-width="180">
                 <template #default="{ row }"><span class="color-main font-bold">{{ row.department }}</span></template>
             </el-table-column>
@@ -81,7 +81,7 @@
                     </div>
                 </template>
             </el-table-column>
-        </el-table>
+        </SeTable>
 
         <TaskStatsDialog v-model:visible="statsVisible" :row="currentRow" />
         <TaskDetailDialog v-model:visible="detailVisible" :department="currentRow?.department" />

apps/web-vue/src/views/analysis/components/Team/TaskDetailDialog.vue

@@ -7,7 +7,7 @@
             </div>
 
             <div class="px-26 pt-16 pb-26">
-                <el-table :data="detailRows" class="detail-table" row-key="id">
+                <SeTable :data-list="detailRows" class="detail-table" :total="detailRows.length" :default-page-size="10" row-key="id">
                     <el-table-column prop="id" label="任务编号" min-width="130" />
                     <el-table-column prop="name" label="任务名称" min-width="170">
                         <template #default="{ row }">
@@ -28,7 +28,7 @@
                         </template>
                     </el-table-column>
                     <el-table-column prop="time" label="时间" width="200" align="center" />
-                </el-table>
+                </SeTable>
 
                 <div class="flex justify-end mt-26">
                     <el-button type="primary" class="w-64" @click="visible = false">关闭</el-button>

apps/web-vue/src/views/analysis/components/video/AdPlatformTags.vue

@@ -91,7 +91,8 @@
                 </div>
                 <el-button class="round-6" @click="query">⇩ 导出表格</el-button>
             </div>
-            <el-table :data="pagedTableData" class="analysis-table">
+            <SeTable :data-list="pagedTableData" class="analysis-table" :total="tableData.length"
+                :default-page-size="pageData.pageSize" @update:page="handleTablePageChange">
                 <el-table-column prop="account" label="广告账户" min-width="210" show-overflow-tooltip />
                 <el-table-column prop="subject" label="主体" min-width="180" show-overflow-tooltip />
                 <el-table-column prop="department" label="团队" width="130" />
@@ -125,12 +126,7 @@
                 <el-table-column prop="risk" label="同质化素材风险-排队投放素材" width="230" align="center">
                     <template #default="{ row }"><span class="font-bold color-green">{{ row.risk }}</span></template>
                 </el-table-column>
-            </el-table>
-            <div class="py-12 flex justify-end table-footer">
-                <el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
-                    background layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"
-                    :page-sizes="pageData.pageSizes" @size-change="handleSizeChange" />
-            </div>
+            </SeTable>
         </el-card>
     </div>
 </template>
@@ -161,7 +157,6 @@ const collapsed = ref(false);
 const pageData = reactive({
     currentPage: 1,
     pageSize: 10,
-    pageSizes: [10, 20, 50, 100],
 });
 const platformTabs = [
     { label: '巨量千川', value: 'qianchuan', icon: 'Ⅲ' },
@@ -207,24 +202,19 @@ const reset = () => {
     category.value = '';
     dateRange.value = '';
 };
-const handleSizeChange = () => {
-    pageData.currentPage = 1;
+const handleTablePageChange = (page: number, size: number) => {
+    pageData.currentPage = page;
+    pageData.pageSize = size;
 };
 </script>
 
 <style scoped lang="scss">
 .filter-header,
 .ratio-title,
-.table-title,
-.table-footer {
+.table-title {
     border-bottom: 1px solid #edf0f5;
 }
 
-.table-footer {
-    border-top: 1px solid #edf0f5;
-    border-bottom: none;
-}
-
 .platform-tab {
     color: #607086;
 

apps/web-vue/src/views/analysis/components/video/DeliveryReport.vue

@@ -42,7 +42,8 @@
                 </div>
             </div>
 
-            <el-table :data="pagedTableData" class="analysis-table">
+            <SeTable :data-list="pagedTableData" class="analysis-table" :total="tableData.length"
+                :default-page-size="pageData.pageSize" @update:page="handleTablePageChange">
                 <el-table-column prop="department" label="团队" min-width="160" />
                 <el-table-column prop="cost" label="消耗" width="120" align="center" />
                 <el-table-column prop="roi" label="roi" width="90" align="center" />
@@ -58,12 +59,7 @@
                 <el-table-column prop="clickRate" label="点击率" width="110" align="center" />
                 <el-table-column prop="avgPrice" label="平均点击单价" width="140" align="center" />
                 <el-table-column prop="play" label="播放量" width="130" align="center" />
-            </el-table>
-            <div class="py-12 flex justify-end table-footer">
-                <el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
-                    background layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"
-                    :page-sizes="pageData.pageSizes" @size-change="handleSizeChange" />
-            </div>
+            </SeTable>
         </el-card>
     </div>
 </template>
@@ -80,7 +76,6 @@ const radioVal = ref(1)
 const pageData = reactive({
     currentPage: 1,
     pageSize: 10,
-    pageSizes: [10, 20, 50, 100],
 });
 const platforms = ['巨量广告', '巨量千川', '磁力智投', '磁力金牛', '百度营销', '小红书'];
 const scopes = ['团队', '分组', '个人', '明细', '分日', '分月'];
@@ -96,8 +91,9 @@ const pagedTableData = computed(() => {
     const start = (pageData.currentPage - 1) * pageData.pageSize;
     return tableData.slice(start, start + pageData.pageSize);
 });
-const handleSizeChange = () => {
-    pageData.currentPage = 1;
+const handleTablePageChange = (page: number, size: number) => {
+    pageData.currentPage = page;
+    pageData.pageSize = size;
 };
 </script>
 
@@ -107,16 +103,10 @@ const handleSizeChange = () => {
     border: 1px solid #dfe7f2;
 }
 
-.sub-tabs,
-.table-footer {
+.sub-tabs {
     border-bottom: 1px solid #edf0f5;
 }
 
-.table-footer {
-    border-top: 1px solid #edf0f5;
-    border-bottom: none;
-}
-
 .header-tabs .active {
     color: rgba(var(--main-color), 1);
     border-bottom: 2px solid rgba(var(--main-color), 1);

apps/web-vue/src/views/analysis/components/video/TagAnalysis.vue

@@ -74,7 +74,8 @@
                     <el-button class="w-34 h-34 round-6">⌯</el-button>
                 </div>
             </div>
-            <el-table :data="pagedTableData" class="analysis-table">
+            <SeTable :data-list="pagedTableData" class="analysis-table" :total="tableData.length"
+                :default-page-size="pageData.pageSize" @update:page="handleTablePageChange">
                 <el-table-column prop="name" label="模特姓名 / 标签" width="130" />
                 <el-table-column prop="videos" label="视频数量" width="100" align="center" />
                 <el-table-column prop="cost" label="消耗" width="130" align="center" />
@@ -96,18 +97,7 @@
                 <el-table-column prop="orders" label="净成交订单数" width="130" align="center" />
                 <el-table-column prop="netRoi" label="净成交ROI" width="110" align="center" />
                 <el-table-column prop="unit" label="净成交订单成本" width="140" align="center" />
-            </el-table>
-            <div class="py-12 flex justify-end table-footer">
-                <el-pagination
-                    v-model:current-page="pageData.currentPage"
-                    v-model:page-size="pageData.pageSize"
-                    background
-                    layout="total, sizes, prev, pager, next, jumper"
-                    :total="tableData.length"
-                    :page-sizes="pageData.pageSizes"
-                    @size-change="handleSizeChange"
-                />
-            </div>
+            </SeTable>
         </el-card>
     </div>
 </template>
@@ -131,7 +121,6 @@ const costRange = ref('');
 const pageData = reactive({
     currentPage: 1,
     pageSize: 10,
-    pageSizes: [10, 20, 50, 100],
 });
 const topTabs = ['标签分析', '潜力 / 当月爆款', '使用数据'];
 const platforms = ['抖音', '腾讯', 'TikTok'];
@@ -167,24 +156,19 @@ const pagedTableData = computed(() => {
     const start = (pageData.currentPage - 1) * pageData.pageSize;
     return tableData.slice(start, start + pageData.pageSize);
 });
-const handleSizeChange = () => {
-    pageData.currentPage = 1;
+const handleTablePageChange = (page: number, size: number) => {
+    pageData.currentPage = page;
+    pageData.pageSize = size;
 };
 </script>
 
 <style scoped lang="scss">
 .header-tabs,
 .section-title,
-.table-title,
-.table-footer {
+.table-title {
     border-bottom: 1px solid #edf0f5;
 }
 
-.table-footer {
-    border-top: 1px solid #edf0f5;
-    border-bottom: none;
-}
-
 .header-tabs .active {
     color: rgba(var(--main-color), 1);
     border-bottom: 2px solid rgba(var(--main-color), 1);

apps/web-vue/src/views/analysis/components/video/TencentDeliveryReport.vue

@@ -34,7 +34,8 @@
                 <span class="fs-16 font-bold">汇总数据</span>
                 <el-button type="default" plain>导出数据</el-button>
             </div>
-            <el-table :data="pagedTableData" class="analysis-table">
+            <SeTable :data-list="pagedTableData" class="analysis-table" :total="tableData.length"
+                :default-page-size="pageData.pageSize" @update:page="handleTablePageChange">
                 <el-table-column prop="department" label="团队" min-width="180" />
                 <el-table-column prop="cost" label="消耗" align="center" />
                 <el-table-column prop="conversions" label="转化数" align="center" />
@@ -46,12 +47,7 @@
                 <el-table-column prop="avgPrice" label="平均点击单价" align="center" />
                 <el-table-column prop="play" label="播放量" align="center" />
                 <el-table-column prop="complete" label="3S完播率" align="center" />
-            </el-table>
-            <div class="px-20 py-12 flex justify-end table-footer">
-                <el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
-                    background layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"
-                    :page-sizes="pageData.pageSizes" @size-change="handleSizeChange" />
-            </div>
+            </SeTable>
         </el-card>
     </div>
 </template>
@@ -66,7 +62,6 @@ const radioVal = ref(1)
 const pageData = reactive({
     currentPage: 1,
     pageSize: 10,
-    pageSizes: [10, 20, 50, 100],
 });
 const dataTabs = ['团队数据', '分组数据', '个人数据'];
 const tableData = [
@@ -80,23 +75,18 @@ const pagedTableData = computed(() => {
     const start = (pageData.currentPage - 1) * pageData.pageSize;
     return tableData.slice(start, start + pageData.pageSize);
 });
-const handleSizeChange = () => {
-    pageData.currentPage = 1;
+const handleTablePageChange = (page: number, size: number) => {
+    pageData.currentPage = page;
+    pageData.pageSize = size;
 };
 </script>
 
 <style scoped lang="scss">
 .header-tabs,
-.table-title,
-.table-footer {
+.table-title {
     border-bottom: 1px solid #edf0f5;
 }
 
-.table-footer {
-    border-top: 1px solid #edf0f5;
-    border-bottom: none;
-}
-
 .header-tabs .active {
     color: rgba(var(--main-color), 1);
     border-bottom: 2px solid rgba(var(--main-color), 1);

apps/web-vue/src/views/resource/clip/components/MaterialData.vue

@@ -164,7 +164,7 @@
                         <el-button type="primary">导出</el-button>
                     </div>
                 </div>
-                <el-table :data="scTableData" style="width: 100%" size="small">
+                <SeTable :data-list="scTableData" size="small" :total="scTableData.length">
                     <el-table-column prop="date" label="广告账户" width="180" />
                     <el-table-column prop="name" label="媒体" width="180" />
                     <el-table-column prop="address" label="素材ID / 创意ID" width="180" />
@@ -180,7 +180,7 @@
                             <el-button type="primary" size="small" link>取消关联</el-button>
                         </template>
                     </el-table-column>
-                </el-table>
+                </SeTable>
             </div>
             <div v-if="dialogIndex !== 3" class="flex justify-end gap-10 p-16" style="border-top: 1px solid #eee;">
                 <el-button plain>取消</el-button>
@@ -334,4 +334,4 @@ const scTableData = ref([
         border-radius: 12px;
     }
 }
-</style>
+</style>
\ No newline at end of file

apps/web-vue/src/views/resource/script/UploadDialog.vue

@@ -74,7 +74,8 @@
                                 画面时间轴
                             </div>
                             <div class="flex-1 hidden">
-                                <el-table :data="form.list" style="width: 100%" border>
+                                <SeTable :data-list="form.list" border :total="form.list.length"
+                                    :default-page-size="100" :show-pagination="false">
                                     <el-table-column label="画面时间点 (秒)" align="center" width="200">
                                         <template #default="{ row, $index }">
                                             <el-form-item :prop="`list.${$index}.content1`"
@@ -132,7 +133,7 @@
                                             <el-button type="primary" size="small" @click="addRow($index)">新增</el-button>
                                         </template>
                                     </el-table-column>
-                                </el-table>
+                                </SeTable>
                             </div>
                         </div>
                         <el-form-item label="视频格式" prop="name">
@@ -425,4 +426,4 @@ const tagSelfOptions = ref([
 .el-dialog__footer {
     padding: 0 !important;
 }
-</style>
+</style>
\ No newline at end of file

apps/web-vue/src/views/resource/script/index.vue

@@ -5,7 +5,8 @@
             <el-button type="primary" @click="openDialog">上传文件</el-button>
         </div>
         <section class="mt-20 p-10 bg-fff round-12">
-            <el-table :data="tableData" style="width: 100%" size="large" @selection-change="handleSelectionChange">
+            <SeTable :data-list="tableData" size="large" :total="tableData.length"
+                @selection-change="handleSelectionChange">
                 <el-table-column type="selection" width="55" />
                 <el-table-column prop="title" label="脚本" width="300">
                     <template #default="{ row }">
@@ -41,7 +42,7 @@
                         <ElButton type="primary" link>分享链接</ElButton>
                     </template>
                 </el-table-column>
-            </el-table>
+            </SeTable>
         </section>
         <UploadDialog v-model:visible="dialogVisible" />
         <Dialog v-model="visibleLook" bg-color="#fff" width="800">

apps/web-vue/src/views/task/index.vue

@@ -72,8 +72,9 @@
             </div>
         </section>
 
-        <section class="mt-16 bg-fff round-10 hidden table-card">
-            <el-table :data="pageList" size="large" class="task-table" row-key="id">
+        <section class="mt-16 bg-fff round-10 hidden table-card pb-20">
+            <SeTable :data-list="pageList" class="task-table" row-key="id" :total="filteredList.length"
+                :default-page-size="pageSize" @update:page="handleTablePageChange">
                 <el-table-column prop="publisher" label="发布任务" width="170">
                     <template #default="{ row }">
                         <div>
@@ -185,13 +186,7 @@
                             }}</el-button>
                     </template>
                 </el-table-column>
-            </el-table>
-            <div class="px-16 py-12 flex-between table-footer">
-                <span class="color-000">共 {{ filteredList.length }} 条</span>
-                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
-                    :page-sizes="[10, 20, 30, 50, 100]" background layout="sizes, prev, pager, next, jumper"
-                    :total="filteredList.length" />
-            </div>
+            </SeTable>
         </section>
         <TaskPublishDialog v-model:visible="visiblePublish" @confirm="handlePublishConfirm" />
         <ScriptBreakdownDialog v-model:visible="visibleBreakdown" :breakdown-id="currentBreakdownId"
@@ -517,6 +512,11 @@ const openBreakdownDialog = (row: TaskItem) => {
     visibleBreakdown.value = true;
 };
 
+const handleTablePageChange = (page: number, size: number) => {
+    currentPage.value = page;
+    pageSize.value = size;
+};
+
 const handleBreakdownSave = (form: any) => {
     ElMessage.success(`已保存拆解表：${form.breakdownId}`);
 };
@@ -571,10 +571,6 @@ const exportTask = () => ElMessage.success('批量导出');
     }
 }
 
-.table-footer {
-    border-top: 1px solid #edf0f5;
-}
-
 .dot {
     display: inline-block;
     width: 8px;