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