更新

src/components/scTable/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="sc-table">
+	<div class="sc-table" ref="tableWrapper">
 		<!-- 表格内容 -->
 		<div class="sc-table-content" ref="tableContent">
 			<a-table :columns="tableColumns" :data-source="dataSource" :loading="loading" :pagination="false"
@@ -17,15 +17,6 @@
 						<slot :name="column.slot || column.dataIndex" :text="text" :record="record" :index="index"
 							:column="column"></slot>
 					</template>
-					<!-- 操作列 -->
-					<template v-else-if="column.dataIndex === '_action'">
-						<a-space>
-							<a-button v-for="(action, idx) in actions" :key="idx" type="link" size="small"
-								:disabled="action.disabled" @click="handleAction(action, record, index)">
-								{{ action.label }}
-							</a-button>
-						</a-space>
-					</template>
 				</template>
 
 				<!-- 空状态 -->
@@ -38,8 +29,8 @@
 		<!-- 工具栏 -->
 		<div v-if="showToolbar" class="sc-table-tool">
 			<div class="tool-left">
-				<a-pagination v-bind="pagination">
-				</a-pagination>
+				<a-pagination v-bind="pagination" @change="handlePaginationChange"
+					@showSizeChange="handlePaginationChange" />
 			</div>
 			<div class="tool-right">
 				<!-- 右侧工具栏插槽 -->
@@ -124,7 +115,7 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, reactive, useTemplateRef, onMounted } from 'vue'
+import { ref, computed, watch, reactive, useTemplateRef, onMounted, onBeforeUnmount } from 'vue'
 import { Empty } from 'ant-design-vue'
 
 defineOptions({
@@ -205,26 +196,6 @@ const props = defineProps({
 		type: String,
 		default: '序号',
 	},
-	// 是否显示操作列
-	showAction: {
-		type: Boolean,
-		default: false,
-	},
-	// 操作列配置
-	actions: {
-		type: Array,
-		default: () => [],
-	},
-	// 操作列宽度
-	actionColumnWidth: {
-		type: Number,
-		default: 200,
-	},
-	// 操作列标题
-	actionTitle: {
-		type: String,
-		default: '操作',
-	},
 	// 是否显示工具栏
 	showToolbar: {
 		type: Boolean,
@@ -248,6 +219,7 @@ const props = defineProps({
 })
 
 const tableContent = useTemplateRef('tableContent')
+const tableWrapper = useTemplateRef('tableWrapper')
 let scroll = ref({
 	scrollToFirstRowOnChange: true,
 	x: 'max-content',
@@ -259,19 +231,20 @@ onMounted(() => {
 })
 
 const updateTableHeight = () => {
-	let tableHeight = 0
-	tableHeight = tableContent.value.clientHeight - 56
-	scroll.value.y = tableHeight
+	if (tableContent.value) {
+		const tableHeight = tableContent.value.clientHeight - 56
+		scroll.value.y = tableHeight > 0 ? tableHeight : 400
+	}
 }
 
 // 根据表格宽度优化横向滚动配置
 watch(
-	[() => props.columns, () => props.showIndex, () => props.showAction, tableContent],
+	[() => props.columns, () => props.showIndex, tableContent],
 	() => {
 		// 如果列有固定宽度且总宽度较大，使用max-content
 		// 否则使用true让表格自适应
 		const hasFixedColumns = props.columns.some((col) => col.width)
-		if (hasFixedColumns || props.showIndex || props.showAction) {
+		if (hasFixedColumns || props.showIndex) {
 			scroll.value.x = 'max-content'
 		} else {
 			scroll.value.x = true
@@ -301,7 +274,7 @@ watch(
 	},
 )
 
-const emit = defineEmits(['refresh', 'change', 'resizeColumn', 'action', 'select', 'selectAll', 'selectNone'])
+const emit = defineEmits(['refresh', 'change', 'resizeColumn', 'select', 'selectAll', 'selectNone', 'paginationChange'])
 
 // 列设置相关
 const columnSettingVisible = ref(false)
@@ -310,9 +283,9 @@ const visibleColumns = ref([])
 const sortedColumns = ref([]) // 排序后的列key数组
 const draggingIndex = ref(-1) // 当前拖拽的索引
 
-// 所有列（包含序号和操作列）
+// 所有列
 const allColumns = computed(() => {
-	return props.columns.filter((col) => col.dataIndex && col.dataIndex !== '_index' && col.dataIndex !== '_action')
+	return props.columns.filter((col) => col.dataIndex && col.dataIndex !== '_index')
 })
 
 // 获取列标题
@@ -325,7 +298,7 @@ const getColumnTitle = (colKey) => {
 watch(
 	() => props.columns,
 	(newColumns) => {
-		const columnKeys = newColumns.filter((col) => col.dataIndex && col.dataIndex !== '_index' && col.dataIndex !== '_action').map((col) => col.dataIndex || col.key)
+		const columnKeys = newColumns.filter((col) => col.dataIndex && col.dataIndex !== '_index').map((col) => col.dataIndex || col.key)
 
 		// 如果是首次初始化，使用原始顺序
 		if (sortedColumns.value.length === 0) {
@@ -393,9 +366,14 @@ const handleRefresh = () => {
 	emit('refresh')
 }
 
-// 处理表格变化（分页、排序、筛选）
-const handleTableChange = (pagination, filters, sorter, extra) => {
-	emit('change', { pagination, filters, sorter, extra })
+// 处理分页变化
+const handlePaginationChange = (page, pageSize) => {
+	emit('paginationChange', { page, pageSize })
+}
+
+// 处理表格变化（排序、筛选）
+const handleTableChange = (filters, sorter, extra) => {
+	emit('change', { filters, sorter, extra })
 }
 
 // 处理列宽调整
@@ -409,13 +387,6 @@ const getTableIndex = (index) => {
 	return (current - 1) * pageSize + index + 1
 }
 
-// 处理操作按钮点击
-const handleAction = (action, record, index) => {
-	if (action.onClick) {
-		action.onClick(record, index)
-	}
-	emit('action', { action, record, index })
-}
 
 // 表格列配置
 const tableColumns = computed(() => {
@@ -449,18 +420,6 @@ const tableColumns = computed(() => {
 		}
 	})
 
-	// 添加操作列
-	if (props.showAction) {
-		columns.push({
-			title: props.actionTitle,
-			dataIndex: '_action',
-			key: '_action',
-			width: props.actionColumnWidth,
-			align: 'center',
-			fixed: 'right',
-		})
-	}
-
 	return columns
 })