el-table设置悬浮框

### 实现 Element UI 的 `el-table` 悬浮框功能

为了实现当鼠标悬停在表格行上时显示额外信息的功能，可以利用自定义事件和样式来创建悬浮框效果。通过结合 Vue.js 和 CSS 可以轻松完成此操作。

#### 方法一：使用内置的 `tooltip`

Element UI 提供了一个非常方便的组件叫做 Tooltip，可以直接应用于单元格内展示提示信息：

<template>
  <div>
    <el-table :data="tableData">
      <!-- 利用 slot-scope 获取当前行数据 -->
      <el-table-column prop="name" label="姓名">
        <template slot-scope="scope">
          <el-tooltip effect="dark" :content="scope.row.desc" placement="top-start">
            {{ scope.row.name }}
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: "张三", desc: "描述1" },
        { name: "李四", desc: "描述2" }
      ]
    };
  }
};
</script>

这种方法简单易懂，并且完全依赖于框架本身提供的工具[^1]。

#### 方法二：手动控制悬浮层位置

如果希望有更灵活的表现形式，则可以通过监听鼠标的进入离开事件来自定义悬浮框的位置与内容：

<template>
  <div style="position:relative;">
    <el-table :data="tableData" @cell-mouse-enter="handleMouseEnter" @cell-mouse-leave="handleMouseLeave">
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
    </el-table>
    
    <!-- 自定义浮动窗口 -->
    <transition name="fade">
      <div v-if="showTooltip" class="custom-tooltip" :style="{left:left+'px', top:top+'px'}">{{ tooltipContent }}</div>
    </transition>
  </div>
</template>

<style scoped>
.custom-tooltip{
  position:absolute;
  background:#fff;
  border-radius:4px;
  box-shadow:0 0 8px rgba(0,0,0,.1);
  padding:8px;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s ease-out;
}
.fade-enter,
.fade-leave-to /* .fade-leave-active below version 2.1.8 */ 
{opacity:0;}
</style>

<script>
export default {
  data(){
    return {
      showTooltip:false,
      left:0,
      top:0,
      tooltipContent:'',
      tableData:[...]
    }
  },
  methods:{
    handleMouseEnter(row,column,event){
      this.tooltipContent = column.label + ':' + row[column.property];
      const targetRect = event.target.getBoundingClientRect();
      this.left = targetRect.right; // 调整到目标元素右侧
      this.top = targetRect.bottom - window.scrollY; // 减去滚动条偏移量
      setTimeout(() => (this.showTooltip=true),1); // 延迟显示防止闪烁
    },
    handleMouseLeave(){this.showTooltip=false;}
  }
}
</script>

这段代码展示了如何捕捉鼠标的移动并动态调整悬浮框的位置以及其内部的内容[^3]。