Signed-off-by: 1iyc <5212514+liycone@user.noreply.gitee.com>
main
1iyc 22 hours ago
parent 79ae0c2d44
commit 110c1668da

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

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

@ -16,6 +16,7 @@
@query="handleQuery" @query="handleQuery"
@reset="handleReset" @reset="handleReset"
@toggle="getRows" @toggle="getRows"
@operation-click="handleOperationClick"
/> />
</div> </div>
</template> </template>
@ -83,6 +84,20 @@ export default {
{label: '表注', prop: 'tableDescription', sortable: true}, {label: '表注', prop: 'tableDescription', sortable: true},
{label: '启用', prop: 'enable', formatter: (value) => (value ? '启用' : '禁用'), sortable: true}, {label: '启用', prop: 'enable', formatter: (value) => (value ? '启用' : '禁用'), sortable: true},
{label: '定时', prop: 'cron'}, {label: '定时', prop: 'cron'},
{
label: '操作',
prop: 'operations',
width: '150',
fixed: 'right',
scopedSlots: {
customRender: 'operations',
buttons: [
{text: '编辑', operation: 'edit'},
{text: '删除', operation: 'delete'},
{text: '同步', operation: 'sync'},
]
}
}
], ],
tabs: [], tabs: [],
loading: false, // loading loading: false, // loading
@ -118,6 +133,7 @@ export default {
// //
handleQuery() { handleQuery() {
this.getRows(); this.getRows();
}, },
// //
handleReset() { handleReset() {
@ -149,6 +165,38 @@ export default {
this.loading = false; // loading false 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> </script>

Loading…
Cancel
Save