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

@ -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); /* 调整高度以适应页面布局 */

@ -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>

@ -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>

Loading…
Cancel
Save