v 1.2.2

Signed-off-by: 1iyc <5212514+liycone@user.noreply.gitee.com>

src/components/TabComponent/index.vue

@@ -55,6 +55,7 @@
                   :loading="loading"
                   @sort-change="handleSortChange"
                   @page-change="handlePageChange"
+                  @operation-click="handleOperationClick"
                 />
               </div>
             </el-tab-pane>
@@ -65,6 +66,7 @@
   </div>
 </template>
 
+
 <script>
 export default {
   props: {
@@ -171,10 +173,19 @@ export default {
       this.$emit('update:index', activeName);
       this.$emit('remove', targetName);
     },
+    handleOperationClick(operation, row) {
+      this.$emit('operation-click', operation, row);
+    },
+  },
+
+
+  mounted() {
+    console.log('Received props:', this.$props);
   }
 }
 </script>
 
+
 <style scoped>
 .table-container {
   height: calc(100vh - 250px); /* 调整高度以适应页面布局 */

src/components/Table/index.vue

@@ -15,16 +15,29 @@
         :label="column.label"
         :width="column.width"
         :sortable="column.sortable"
-        :show-overflow-tooltip="true"
+        :fixed="column.fixed"
       >
         <template slot-scope="scope">
           <span v-if="column.formatter">{{ column.formatter(scope.row[column.prop]) }}</span>
-          <span v-else>{{ scope.row[column.prop] }}</span>
+          <span v-else-if="!column.scopedSlots">{{ scope.row[column.prop] }}</span>
+          <span v-else-if="column.scopedSlots && column.scopedSlots.customRender === 'operations'">
+            <el-button
+              v-for="button in column.scopedSlots.buttons"
+              :key="button.text"
+              type="text"
+              size="small"
+              @click="handleOperationClick(button.operation, scope.row)"
+            >
+              {{ button.text }}
+            </el-button>
+          </span>
         </template>
       </el-table-column>
     </el-table>
+
+    <!-- 分页组件 -->
     <el-pagination
-      v-if="pagination"
+      v-if="pagination && rows.length > 0"
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
       :current-page="currentPage"
@@ -34,6 +47,11 @@
       :total="total"
       style="margin-top: 20px"
     />
+
+    <!-- 如果数据为空，显示提示信息 -->
+    <div v-if="rows.length === 0" style="text-align: center; margin-top: 20px;">
+      暂无数据
+    </div>
   </div>
 </template>
 
@@ -69,6 +87,9 @@ export default {
       default: false
     }
   },
+  mounted() {
+    console.log('Table component received props:', this.$props);
+  },
   methods: {
     handleSortChange({prop, order}) {
       this.$emit('sort-change', {prop, order});
@@ -80,11 +101,10 @@ export default {
     handleCurrentChange(newPage) {
       this.$emit('update:current-page', newPage);
       this.$emit('page-change', {page: newPage, size: this.pageSize});
+    },
+    handleOperationClick(operation, row) {
+      this.$emit('operation-click', operation, row);
     }
   }
 };
 </script>
-
-<style scoped>
-/* 添加一些样式 */
-</style>

src/views/gather/pool/index.vue

@@ -16,6 +16,7 @@
       @query="handleQuery"
       @reset="handleReset"
       @toggle="getRows"
+      @operation-click="handleOperationClick"
     />
   </div>
 </template>
@@ -83,6 +84,20 @@ export default {
         {label: '表注', prop: 'tableDescription', sortable: true},
         {label: '启用', prop: 'enable', formatter: (value) => (value ? '启用' : '禁用'), sortable: true},
         {label: '定时', prop: 'cron'},
+        {
+          label: '操作',
+          prop: 'operations',
+          width: '150',
+          fixed: 'right',
+          scopedSlots: {
+            customRender: 'operations',
+            buttons: [
+              {text: '编辑', operation: 'edit'},
+              {text: '删除', operation: 'delete'},
+              {text: '同步', operation: 'sync'},
+            ]
+          }
+        }
       ],
       tabs: [],
       loading: false, // 添加 loading 属性
@@ -118,6 +133,7 @@ export default {
     // 查询
     handleQuery() {
       this.getRows();
+
     },
     // 重置
     handleReset() {
@@ -149,6 +165,38 @@ export default {
           this.loading = false; // 加载完成后设置 loading 为 false
         });
     },
+    // 处理操作列点击事件
+    handleOperationClick(operation, row) {
+      // 根据操作类型执行相应逻辑
+      switch (operation) {
+        case 'edit':
+          this.handleEdit(row);
+          break;
+        case 'delete':
+          this.handleDelete(row);
+          break;
+        case 'sync':
+          this.handleSync(row);
+          break;
+        default:
+          console.log('未知操作');
+      }
+    },
+    // 编辑操作
+    handleEdit(row) {
+      console.log('编辑行:', row);
+      // 实现编辑逻辑
+    },
+    // 删除操作
+    handleDelete(row) {
+      console.log('删除行:', row);
+      // 实现删除逻辑
+    },
+    // 删除操作
+    handleSync(row) {
+      console.log('同步操作:', row);
+      // 实现删除逻辑
+    },
   }
 };
 </script>