Update 优化Table组件

UI/VAP_V3.VUE/src/assets/sass/_table.scss

@@ -36,11 +36,20 @@
 			height: calc(100% - 10px);
 			box-sizing: border-box;
 			background-color: var(--table-bg);
-			z-index: 1;
+			z-index: 2;
 			overflow: hidden !important;
+			// 使用 will-change 提示浏览器优化性能
+			will-change: transform;
+			// 启用硬件加速
+			transform: translateZ(0);
 			&.no-shadow {
 				box-shadow: none;
 			}
+			// 确保内部内容可以正确应用transform
+			> div {
+				will-change: transform;
+				transform: translateZ(0);
+			}
 		}
 		.fixed-columns {
 			left: 0;

UI/VAP_V3.VUE/src/components/table/partials/body/TableBody.vue

@@ -7,7 +7,8 @@ import BodyTreeTr from "@@@/table/partials/body/BodyTreeTr.vue"
 const propOpts = inject(symbolKeys.body, {
 	isTree: false,
 	childrenField: "children",
-	bodyClass: "fw-semibold text-gray-600"
+	bodyClass: "fw-semibold text-gray-600",
+	keyField: "id"
 })
 const depth = 0
 const rows = inject(symbolKeys.displayData, ref([]))
@@ -18,15 +19,15 @@ const hasChildren = (row: any) => {
 </script>
 <template>
 	<tbody v-if="rows?.length > 0" ref="tbody" :class="propOpts.bodyClass">
-		<template v-for="(row, i) in rows" :key="i">
-			<BodyTr :row="row" :depth="depth" :index="i + 1">
+		<template v-for="(row, i) in rows" :key="row[propOpts.keyField]">
+			<BodyTr :row="row" :depth="depth" :index="(i as number) + 1">
 				<template v-for="(_, name) in $slots" #[name]="{ row }">
 					<slot :name="name" :row="row" />
 				</template>
 			</BodyTr>
 			<template v-if="propOpts.isTree && hasChildren(row)">
 				<BodyTreeTr
-					:index="i + 1"
+					:index="(i as number) + 1"
 					:rows="row[propOpts.childrenField]"
 					:childrenField="propOpts.childrenField"
 					:depth="depth + 1">

UI/VAP_V3.VUE/src/components/table/partials/toolbar/TableSearchFrom.vue

@@ -5,8 +5,8 @@ const propOpts = inject(symbolKeys.searchFrom, {
 	searchFormRowItems: ref([]),
 	searchFormItems: ref([]),
 	queryParams: ref({}),
-	searchFormSpan: 4,
-	tableSearchBtnSpan: 1.5
+	showSearchBtn: true,
+	showSearchBtnText: true
 })
 const searchFormRef = ref<any>()
 const { searchFormRowItems, searchFormItems, queryParams } = propOpts
@@ -15,7 +15,7 @@ const formSlotSuffix = inject(symbolKeys.formSlotSuffix, "tool-form_")
 
 const _searchFormItems = computed(() => {
 	if (propOpts.searchFormItems || propOpts.searchFormRowItems) {
-		const items = searchFormItems.value ?? []
+		const items = searchFormItems.value || []
 		if (
 			!items.find((v) => {
 				return v.field == "searchbtn"
@@ -26,9 +26,9 @@ const _searchFormItems = computed(() => {
 				component: "slot",
 				span: 1.5
 			})
-		return items
+		return items as any
 	}
-	return propOpts.searchFormItems
+	return propOpts.searchFormItems as any
 })
 
 // form表单的插槽 需要tool-form_开头,并去除tool-form_传递给VbForm组件
@@ -51,56 +51,40 @@ function resetForm() {
 </script>
 
 <template>
-	<VbForm
-		v-if="searchFormRowItems || searchFormItems"
-		ref="searchFormRef"
-		v-model:data="queryParams"
-		:row-items="searchFormRowItems"
-		:items="_searchFormItems"
-		:span="propOpts.searchFormSpan">
-		<template v-for="(_, name) in $slots" #[`${formatterFormSlot(name)}`]>
-			<slot v-if="name.toString().search(formSlotSuffix) == 0" :name="name" />
-		</template>
-		<template #searchbtn>
+	<div class="w-100 d-flex">
+		<div class="w-100 me-2">
+			<VbForm
+				v-if="searchFormRowItems || searchFormItems"
+				ref="searchFormRef"
+				v-model:data="queryParams"
+				:row-items="searchFormRowItems"
+				:items="_searchFormItems">
+				<template v-for="(_, name) in $slots" #[`${formatterFormSlot(name)}`]>
+					<slot v-if="name.toString().search(formSlotSuffix) == 0" :name="name" />
+				</template>
+			</VbForm>
+			<el-form
+				v-else-if="$slots['table-search-form']"
+				ref="searchFormRef"
+				:inline="true"
+				:model="propOpts.queryParams"
+				label-width="100px"
+				class="el-row mb-3">
+				<slot name="table-search-form" />
+			</el-form>
+		</div>
+		<div v-if="propOpts.showSearchBtn" class="mb-3 d-flex">
 			<slot v-if="$slots.searchbtn" name="searchbtn"></slot>
-			<el-col v-else :span="propOpts.tableSearchBtnSpan">
+			<template v-else>
 				<el-button class="btn btn-primary" @click="query">
-					<template #icon>
-						<VbIcon icon-name="magnifier" icon-type="solid"></VbIcon>
-					</template>
-					搜索
+					<VbIcon icon-name="magnifier" icon-type="solid"></VbIcon>
+					<span class="ms-2" v-if="propOpts.showSearchBtnText">搜索</span>
 				</el-button>
 				<el-button class="btn btn-light-primary" @click="resetForm">
-					<template #icon>
-						<VbIcon icon-name="arrows-loop" icon-type="solid"></VbIcon>
-					</template>
-					重置
+					<VbIcon icon-name="arrows-loop" icon-type="solid"></VbIcon>
+					<span class="ms-2" v-if="propOpts.showSearchBtnText">重置</span>
 				</el-button>
-			</el-col>
-		</template>
-	</VbForm>
-	<el-form
-		v-else-if="$slots['table-search-form']"
-		ref="searchFormRef"
-		:inline="true"
-		:model="propOpts.queryParams"
-		class="el-row mb-3">
-		<slot name="table-search-form" />
-		<el-col :span="propOpts.tableSearchBtnSpan">
-			<el-form-item>
-				<el-button class="btn btn-primary" @click="query">
-					<template #icon>
-						<VbIcon icon-name="magnifier" icon-type="solid"></VbIcon>
-					</template>
-					搜索
-				</el-button>
-				<el-button class="btn btn-light-primary" @click="resetForm">
-					<template #icon>
-						<VbIcon icon-name="arrows-loop" icon-type="solid"></VbIcon>
-					</template>
-					重置
-				</el-button>
-			</el-form-item>
-		</el-col>
-	</el-form>
+			</template>
+		</div>
+	</div>
 </template>

UI/VAP_V3.VUE/src/components/table/partials/toolbar/TableToolbar.vue

@@ -32,13 +32,13 @@ const onColumnsChange = (v: Header[]) => {
 		</div>
 
 		<transition name="vb-fade">
-			<div v-if="showSearchBar">
-				<TableSearchFrom :key="'toolSearchForm' + new Date().getTime()">
+			<template v-if="showSearchBar">
+				<TableSearchFrom>
 					<template v-for="(_, name) in $slots" #[name]>
 						<slot :name="name" />
 					</template>
 				</TableSearchFrom>
-			</div>
+			</template>
 		</transition>
 
 		<el-row :gutter="10">

UI/VAP_V3.VUE/src/components/table/symbol.ts

@@ -9,8 +9,8 @@ export default {
 		searchFormRowItems: Ref<VbFormRowItem[]>
 		searchFormItems: Ref<VbFormItem[]>
 		queryParams: Ref<any>
-		searchFormSpan?: number
-		tableSearchBtnSpan?: number
+		showSearchBtn?: boolean
+		showSearchBtnText?: boolean
 	}>,
 	toolBtns: Symbol("toolBtns") as InjectionKey<Ref<ToolBtn[]>>,
 	selectedRowCount: Symbol("selectedRowCount") as InjectionKey<Ref<number>>,
@@ -39,6 +39,7 @@ export default {
 		isTree: boolean
 		childrenField: string
 		bodyClass: string
+		keyField: string
 	}>,
 	bodyTr: Symbol("bodyTr") as InjectionKey<{
 		selectedIds: Ref<any[]>