From 38e4af7ca9d1c60c4976f690aba2153ce0907b46 Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Sat, 06 Dec 2025 16:05:11 +0800
Subject: [PATCH] feat:更新使用vue3表格如果数据为空，统一增加空图
---
src/views/job/components/TaskIntermediateContent/TaskIntermediateContent.vue | 28 +++++++++++++
src/views/tickets/ticket.vue | 18 ++++++++-
src/views/tickets/orderLog.vue | 19 +++++++++
src/views/dataCenter/dataCenter.vue | 28 +++++++++++++
src/views/algorithmMange/algorithmMange.vue | 19 +++++++++
5 files changed, 106 insertions(+), 6 deletions(-)
diff --git a/src/views/algorithmMange/algorithmMange.vue b/src/views/algorithmMange/algorithmMange.vue
index 1695145..59a6d5b 100644
--- a/src/views/algorithmMange/algorithmMange.vue
+++ b/src/views/algorithmMange/algorithmMange.vue
@@ -56,9 +56,19 @@
<el-button icon="el-icon-edit" type="text" @click="handleEdit(scope.row)">编辑</el-button>
</template>
</el-table-column>
+ <template #empty>
+ <el-empty
+ class="custom-empty"
+ :image-size="100"
+ >
+ <template #description>
+ <span class="custom-text">暂无数据</span>
+ </template>
+ </el-empty>
+ </template>
</el-table>
</div>
- <div class="pagination">
+ <div class="pagination" v-if="tableList.length > 0">
<el-pagination class="ztzf-pagination" popper-class="custom-pagination-dropdown" background
:page-sizes="[10, 20, 30, 40, 50, 100]" :size="params.size" v-model:current-page="params.current"
v-model:page-size="params.size" layout="total, sizes, prev, pager, next, jumper" :total="total"
@@ -286,10 +296,17 @@
flex: 1;
//margin-top: 18px;
overflow: auto;
+ :deep(.el-scrollbar__view) {
+ height: 100%;
+ }
+ :deep(.el-table--fit,.el-scrollbar__view) {
+ height: 100%;
+ }
}
:deep(.el-pagination) {
display: flex;
justify-content: right;
+ padding: 20px 0;
}
:deep(.el-pagination button) {
diff --git a/src/views/dataCenter/dataCenter.vue b/src/views/dataCenter/dataCenter.vue
index a1baa56..130dfb8 100644
--- a/src/views/dataCenter/dataCenter.vue
+++ b/src/views/dataCenter/dataCenter.vue
@@ -53,6 +53,16 @@
>
</template>
</el-table-column>
+ <template #empty>
+ <el-empty
+ class="custom-empty"
+ :image-size="100"
+ >
+ <template #description>
+ <span class="custom-text">暂无数据</span>
+ </template>
+ </el-empty>
+ </template>
</el-table>
</div>
<!-- 表格部分 -->
@@ -171,10 +181,20 @@
>
</template>
</el-table-column>
+ <template #empty>
+ <el-empty
+ class="custom-empty"
+ :image-size="100"
+ >
+ <template #description>
+ <span class="custom-text">暂无数据</span>
+ </template>
+ </el-empty>
+ </template>
</el-table>
</div>
<!-- 分页 -->
- <div class="pagination">
+ <div class="pagination" v-if="!switchFolders ? tableData.length > 0 : folderList.length > 0">
<el-pagination
:current-page="switchFolders ? FolderListParams.page : jobListParams.current"
:page-size="switchFolders ? FolderListParams.page_size : jobListParams.size"
@@ -935,6 +955,12 @@
height: 0;
flex: 1;
overflow: auto;
+ :deep(.el-scrollbar__view) {
+ height: 100%;
+ }
+ :deep(.el-table--fit,.el-scrollbar__view) {
+ height: 100%;
+ }
.look {
color: #1c5cff;
diff --git a/src/views/job/components/TaskIntermediateContent/TaskIntermediateContent.vue b/src/views/job/components/TaskIntermediateContent/TaskIntermediateContent.vue
index c0b5e80..bc543ab 100644
--- a/src/views/job/components/TaskIntermediateContent/TaskIntermediateContent.vue
+++ b/src/views/job/components/TaskIntermediateContent/TaskIntermediateContent.vue
@@ -85,9 +85,19 @@
<el-button icon="el-icon-view" type="text" @click="handleDetail(scope.row)">查看</el-button>
</template>
</el-table-column>
+ <template #empty>
+ <el-empty
+ class="custom-empty"
+ :image-size="100"
+ >
+ <template #description>
+ <span class="custom-text">暂无数据</span>
+ </template>
+ </el-empty>
+ </template>
</el-table>
</div>
- <div class="pagination">
+ <div class="pagination" v-if="jobListData.length > 0">
<el-pagination class="ztzf-pagination" popper-class="custom-pagination-dropdown" background
:page-sizes="[10, 20, 30, 40, 50, 100]" :size="size" v-model:current-page="jobListParams.current"
v-model:page-size="jobListParams.size" layout="total, sizes, prev, pager, next, jumper" :total="total"
@@ -298,7 +308,22 @@
flex: 1;
margin-top: 18px;
overflow: auto;
+ :deep(.el-scrollbar__view) {
+ height: 100%;
+ }
+ :deep(.el-table--fit,.el-scrollbar__view) {
+ height: 100%;
+ }
}
+
+ .custom-empty {
+ //font-family: Source Han Sans CN, Source Han Sans CN;
+ //margin-top: 15%;
+ //.custom-text {
+ // color: #fff;
+ // font-size: 16px;
+ //}
+ }
.btnItem {
height: 27px;
@@ -344,6 +369,7 @@
:deep(.el-pagination) {
display: flex;
+ padding: 20px 0;
justify-content: right;
}
diff --git a/src/views/tickets/orderLog.vue b/src/views/tickets/orderLog.vue
index 595c86c..5cbacaf 100644
--- a/src/views/tickets/orderLog.vue
+++ b/src/views/tickets/orderLog.vue
@@ -72,9 +72,19 @@
<!-- </template>-->
</template>
</el-table-column>
+ <template #empty>
+ <el-empty
+ class="custom-empty"
+ :image-size="100"
+ >
+ <template #description>
+ <span class="custom-text">暂无数据</span>
+ </template>
+ </el-empty>
+ </template>
</el-table>
</div>
- <div class="pagination">
+ <div class="pagination" v-if="orderListTable.length > 0">
<el-pagination class="ztzf-pagination" popper-class="custom-pagination-dropdown" background
:page-sizes="[10, 20, 30, 40, 50, 100]" v-model:current-page="orderListParams.current"
v-model:page-size="orderListParams.size" layout="total, sizes, prev, pager, next, jumper" :total="total"
@@ -463,6 +473,12 @@
height: calc(100vh - 380px);
margin-top: 18px;
overflow: auto;
+ :deep(.el-scrollbar__view) {
+ height: 100%;
+ }
+ :deep(.el-table--fit,.el-scrollbar__view) {
+ height: 100%;
+ }
}
.btnItem {
@@ -501,6 +517,7 @@
:deep(.el-pagination) {
display: flex;
justify-content: right;
+ padding: 20px 0;
}
:deep(.el-pagination button) {
diff --git a/src/views/tickets/ticket.vue b/src/views/tickets/ticket.vue
index f9b3a3d..cbf70b9 100644
--- a/src/views/tickets/ticket.vue
+++ b/src/views/tickets/ticket.vue
@@ -243,9 +243,19 @@
</template>
</template>
</el-table-column>
+ <template #empty>
+ <el-empty
+ class="custom-empty"
+ :image-size="100"
+ >
+ <template #description>
+ <span class="custom-text">暂无数据</span>
+ </template>
+ </el-empty>
+ </template>
</el-table>
</div>
- <div class="pagination">
+ <div class="pagination" v-if="tableData.length > 0">
<el-pagination
class="table-pagination"
v-model:current-page="page.currentPage"
@@ -1472,7 +1482,7 @@
flex-direction: column;
}
.dataTable {
- height: 0;
+ height: 0;
flex: 1;
overflow: auto;
}
@@ -1531,6 +1541,10 @@
:deep(.el-table--border) {
border: 1px solid #ebeef5;
}
+
+ :deep(.el-table__empty-block) {
+ height: calc(100vh - 400px) !important;
+ }
}
::v-deep(.el-tabs) {
height: 100%;
--
Gitblit v1.9.3