在vue2项目中使用elementui中的el-table时，如何做到鼠标放到第n行上时，该行下方显示一段信息：这是第n行？

在Vue 2项目中，如果你想实现在Element UI的`el-table`组件中，当鼠标悬停到某一行时，在该行下方显示提示信息“这是第n行”，你可以利用Element UI提供的`@row-contextmenu`事件以及自定义的`template`选项来实现这个功能。以下是步骤：

1. 首先，在`<el-table>`组件上添加`row-contextmenu`事件监听器，并设置一个默认的行为（比如关闭菜单），例如：

<el-table :data="tableData" @row-contextmenu="handleContextMenu">
</el-table>

2. 定义`handleContextMenu`函数，获取当前行的数据并计算行数：

methods: {
  handleContextMenu(row) {
    const index = this.tableData.indexOf(row);
    // 显示提示信息前的操作，如清空已有的提示等
    this.showTipMessage(index);
  },
}

3. 创建一个自定义模板`tip-template`，在这个模板里显示行号信息：

<template v-slot="{ $index }">
  <div class="table-tip" v-if="showTip && index === currentHoverIndex">
    这是第{{ $index + 1 }}行
  </div>
</template>

4. 在`handleContextMenu`中，记录下当前鼠标悬停的行索引，并根据需要显示或隐藏提示：

data() {
  return {
    showTip: false,
    currentHoverIndex: null,
  };
},
mounted() {
  // 初始化鼠标离开时隐藏提示
  document.body.addEventListener('mouseout', this.clearTip);
},
methods: {
  ...,
  clearTip() {
    this.showTip = false;
    this.currentHoverIndex = null;
  },
  // 当鼠标移动时更新hoverIndex并显示提示
  onMouseMove(e) {
    if (this.$refs.table && e.target.classList.contains('el-table__row')) {
      const hoveredRow = e.target.parentNode;
      this.currentHoverIndex = hoveredRow.index;
      if (!this.showTip) {
        this.showTip = true;
      }
    }
  },
  // 显示提示信息的方法，可以根据需要调整行号位置
  showTipMessage(index) {
    // 清除旧的提示信息
    this.clearTip();
    // 更新当前hoverIndex并在适当的时候显示提示
    this.currentHoverIndex = index;
    setTimeout(() => { this.showTip = true; }, 100); // 延迟显示避免闪烁
  },
},

5. 最后，给body绑定`mousemove`事件，并确保将`clearTip`方法添加到`mounted`生命周期钩子内。

这样，当你在`el-table`的某一行上悬停时，就会看到对应的行号提示了。记得在CSS中对`.table-tip`进行适当的样式定制，使其符合你的设计需求。