From 77bb73aaef8f85d961b373731a05361cbe6921de Mon Sep 17 00:00:00 2001
From: 张诺 <2864490065@qq.com>
Date: 星期五, 25 七月 2025 14:06:57 +0800
Subject: [PATCH] 提交设备管理优化 以及防抖功能
---
src/components/dialog/DilogTable.vue | 148 ++++++++++++++++++++++++++++++++++++-------------
1 files changed, 109 insertions(+), 39 deletions(-)
diff --git a/src/components/dialog/DilogTable.vue b/src/components/dialog/DilogTable.vue
index 9ecba42..9373d79 100644
--- a/src/components/dialog/DilogTable.vue
+++ b/src/components/dialog/DilogTable.vue
@@ -7,13 +7,19 @@
@close="handleClose"
class="dialog-table"
>
- <ETable
- :columns="columns"
- :table-data="tableData"
- :loading="loading"
- :show-selection="false"
- :show-operations="false"
- />
+ <div class="dialog-table-content">
+ <div class="table-wrapper">
+ <ETable
+ :columns="columns"
+ :table-data="tableData"
+ :loading="loadings"
+ :show-selection="false"
+ :show-operations="false"
+ :height="height"
+ :style="{ minHeight: height }"
+ />
+ </div>
+ </div>
</el-dialog>
</template>
@@ -22,44 +28,20 @@
import ETable from '@/components/Table/ETable.vue'
const props = defineProps({
- // 寮圭獥鎺у埗
- modelValue: {
- type: Boolean,
- default: false
- },
- title: {
- type: String,
- default: '鏁版嵁琛ㄦ牸'
- },
- width: {
- type: String,
- default: '80%'
- },
-
- // 琛ㄦ牸鏁版嵁
- tableData: {
- type: Array,
- default: () => []
- },
- columns: {
- type: Array,
- default: () => []
- },
- loading: {
- type: Boolean,
- default: false
- }
+ modelValue: Boolean,
+ title: String,
+ width: String,
+ tableData: Array,
+ columns: Array,
+ loading: Boolean,
+ height: [String, Number]
})
-
+const loadings = computed(() => props.loading || false)
const emit = defineEmits(['update:modelValue'])
-
-// 寮圭獥鏄剧ず鎺у埗
const visible = computed({
get: () => props.modelValue,
set: (value) => emit('update:modelValue', value)
})
-
-// 鍏抽棴寮圭獥
const handleClose = () => {
emit('update:modelValue', false)
}
@@ -109,4 +91,92 @@
}
}
}
+
+.dialog-table-content {
+ display: flex;
+ flex-direction: column;
+ min-height: 300px;
+}
+
+.table-wrapper {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+}
+
+.empty-state {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 300px;
+ background-color: #ffffff;
+ border-radius: 6px;
+ border: 1px dashed #d9d9d9;
+}
+
+.pagination-wrapper {
+ margin-top: 20px;
+ display: flex;
+ justify-content: center;
+ padding: 16px 0;
+ background-color: #ffffff;
+ border-radius: 6px;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+
+ :deep(.el-pagination) {
+ --el-pagination-font-size: 14px;
+ --el-pagination-bg-color: #ffffff;
+ --el-pagination-text-color: #606266;
+ --el-pagination-border-radius: 4px;
+
+ .btn-prev,
+ .btn-next {
+ background-color: #f5f7fa;
+ color: #606266;
+
+ &:hover {
+ color: #409eff;
+ }
+
+ &:disabled {
+ color: #c0c4cc;
+ background-color: #f5f7fa;
+ }
+ }
+
+ .el-pager li {
+ background-color: #f5f7fa;
+ color: #606266;
+
+ &:hover {
+ color: #409eff;
+ }
+
+ &.is-active {
+ background-color: #409eff;
+ color: #ffffff;
+ }
+ }
+
+ .el-pagination__sizes .el-select .el-input__wrapper {
+ background-color: #f5f7fa;
+ }
+
+ .el-pagination__jump .el-input__wrapper {
+ background-color: #f5f7fa;
+ }
+ }
+}
+
+/* 鍝嶅簲寮忚璁� */
+@media (max-width: 768px) {
+ .pagination-wrapper {
+ :deep(.el-pagination) {
+ .el-pagination__sizes,
+ .el-pagination__jump {
+ display: none;
+ }
+ }
+ }
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.3