在Vue 3和Element Plus中，要在鼠标移动到表格某个单元格上时显示tooltip，可以使用el-tooltip组件，并结合表格的cell-mouse-enter和cell-mouse-leave事件。
<template>
<el-table
:data="tableData"
@cell-mouse-enter="handleCellMouseEnter"
@cell-mouse-leave="handleCellMouseLeave"
>
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址" width="200">
<template #default="{ row, column }">
<el-tooltip
:content="row[column.property]"
v-model:visible="tooltipVisible[column.id]"
placement="top"
>
<span>{{ row[column.property] }}</span>
</el-tooltip>
</template>
</el-table-column>
</el-table>
</template>
<script setup lang="ts">
import { ref } from 'vue';
interface TableData {
date: string;
name: string;
address: string;
}
const tableData: TableData[] = [
{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
// ...更多数据
];
const tooltipVisible = ref<{ [key: string]: boolean }>({});
const handleCellMouseEnter = (row: TableData, column: any, cell: HTMLElement, event: MouseEvent) => {
tooltipVisible.value[column.id] = true;
};
const handleCellMouseLeave = (row: TableData, column: any, cell: HTMLElement, event: MouseEvent) => {
tooltipVisible.value[column.id] = false;
};
</script>
在这个示例中，我们定义了一个tooltipVisible响应式对象来跟踪每列的tooltip显示状态。handleCellMouseEnter和handleCellMouseLeave方法分别在鼠标移入和移出单元格时设置对应列的tooltip显示状态。
在el-table-column中，我们使用#default插槽自定义列模板，并在模板内部包裹了el-tooltip组件。el-tooltip的content属性绑定当前单元格的内容，v-model:visible属性绑定tooltipVisible对象中对应列的显示状态。这样，当鼠标移入单元格时，对应的tooltip就会显示出来。
