antdv树形表格 大量tooltip等组件导致页面卡顿问题优化

vue3、ant-design-vue 4.2.3

遇到的问题：页面中有个展示树形数据的表格，默认需要全部展开，有一组数据量较大时页面首次渲染时非常卡顿，发现每次都大概用了7、8秒才完成渲染。表格展开的数据大概300条数据，操作列中有5种仅展示了图标的按钮，每个按钮包裹在Tooltip中，删除和特殊按钮还有PopComfirm组件的交互。大概如下图。

解决思路：树形表格不能用分页去优化，改虚拟滚动还得动组件比较耗时改动很大，排查后发现表格本身加载300条数据大概在500毫秒的样子，但是加入了操作列后速度明显变慢，隐藏了tooltip和confirm组件后速度就上来了。所以我的思路是，表格的渲染分为两步，先渲染纯数据列，延迟操作列内的组件渲染，且操作列只渲染纯图标，当鼠标移入行内后再加载单元格内的tooltip、confirm组件。为了优化使用体验，还增加了loading状态。

优化前后对比：虽然还有2秒左右，但是其他数据量都很小，几十几百毫秒就完成全部渲染，体验上已经可以了，所以还是很满意的。比心～～～

代码逻辑简单示意：

<a-table 
:columns="columns" 
:data-source="data"
:expanded-row-keys="expandedRowKeys"
>
<template #bodyCell="{ column, text, record }">
	<template v-if="column.dataIndex !=='action'">
		{{ text }}
	</template>
	<!-- 操作列 -->
	<template v-else>
		// 默认不渲染这里，仅鼠标移入后才渲染该行
		<span v-if="loadBtn">
			<span v-if="tooltipVisible[record.key]" @mouseenter="setTooltopVisible(record.key, true)">
				<a-tooltip title="操作按钮xxx">
					<a-button><icon1/></a-button>
				</a-tooltip>
			</span>
			<span v-else>
				// 首次渲染，仅展示图标渲染更快，实际可操作组件在上面，鼠标移入后加载
				<icon1>
				<icon2>
				<icon3>
				//...
			</span>
		</span>
		<span v-else>
			<LoadingOutlined />
		</span>
	</template>
</template>
</a-table>

<script setup>
	const columns = ref([{..省略表头..}])
	const data = ref([])
	const expandedRowKeys = ref([])
	const loadBtn = ref(false)
	const tooltipVisible = ref({})
	// 如果考虑鼠标会快速多行滑过的问题，可以使用debounce去处理setTooltopVisible函数
	const setToolipVisible = (key) => {
		tooltipVisible.value[key] = true // 表格如果是动态数据的话，记得每次重新赋值tableData时清空tooltipVisible就行了
	}
	//下面这段逻辑放在接口处理动态渲染表格也是一样的
	onMounted(() => {
		data.value = result // 每行数据需要有唯一的标识值，用来记录更新渲染的行,例子中是 key
		expandedRowKeys.value = ['',,,] // 默认展开全部行，动态请求更新数据的话，需要递归遍历表格数据添加到ExpandedRowKeys中，这里不写了
		// 用定时器将线程改为异步，否则loadBtn将会卡住不展示。操作列loading占位加载单元格内的组件，可以提升用户体验
		setTimeout(() => {
			loadBtn = true
		}, 100)
	})
</script>