UI TreeTable 收缩展开增加动画效果

UI/VAP.VUE/src/components/table/partials/body/BodyTd.vue

@@ -33,11 +33,11 @@ const propsOpts = inject(symbolKeys.bodyTd, {
 	isLazy: false
 })
 const tableBox = inject(symbolKeys.tableBox) as Ref<HTMLElement>
-
+const row = toRef(props.row)
 const isLeaf = computed(() => {
 	return propsOpts.isLazy
-		? toBoolean(props.row[propsOpts.leafField])
-		: !(props.row[propsOpts.childrenField] && props.row[propsOpts.childrenField].length > 0)
+		? toBoolean(row.value[propsOpts.leafField])
+		: !(row.value[propsOpts.childrenField] && row.value[propsOpts.childrenField].length > 0)
 })
 
 const tooltip = computed(() => {
@@ -70,19 +70,13 @@ const tdClass = computed(() => {
 	}
 	return classStr
 })
-
-const slotData = computed(() => {
-	return Object.assign({}, props.row)
-})
-
 const onToggle = () => {
 	if (!isLeaf.value) {
-		VbUtil.EventHandlerUtil.trigger(tableBox.value, "vbtable.row.tree-toggle", props.row)
+		VbUtil.EventHandlerUtil.trigger(tableBox.value, "vbtable.row.tree-toggle", row.value)
 	}
 }
 function init() {
 	//
-	//console.log("props ", propsOpts.isLazy)
 }
 
 onMounted(init)
@@ -117,7 +111,7 @@ onMounted(init)
 			</template>
 		</span>
 		<template v-if="$slots[column.field]">
-			<slot :name="`${column.field}`" :row="slotData"></slot>
+			<slot :name="`${column.field}`" :row="row"></slot>
 		</template>
 		<template v-else-if="column.field == configs.TABLE_INDEX_FIELD">
 			{{ index }}

UI/VAP.Vue/src/assets/sass/_table.scss

@@ -143,9 +143,10 @@
 	tr {
 		&.hide {
 			display: none;
+			animation: hideTr 0.5s linear;
 		}
 		&.show {
-			display: table-row;
+			animation: showTr 0.5s linear;
 		}
 		.tree-icon {
 			.icon {
@@ -154,3 +155,25 @@
 		}
 	}
 }
+
+@keyframes showTr {
+	0% {
+		display: none;
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+		display: table-row;
+	}
+}
+
+@keyframes hideTr {
+	0% {
+		opacity: 1;
+		display: table-row;
+	}
+	100% {
+		display: none;
+		opacity: 0;
+	}
+}