vue3+ts el-table 鼠标移动到某单元格内时就显示 tooltip

在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就会显示出来。