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

在Element UI中，你可以利用表格组件`el-table`结合自定义的mouseover事件以及虚拟滚动功能来实现这个效果。以下是步骤：

1. 首先，在数据列表中添加一个唯一的标识符，比如`rowIndex`，这将在每行元素中存储行号。

data() {
  return {
    tableData: [
      { rowIndex: 1, ... },
      { rowIndex: 2, ... },
      ...
    ]
  }
}

2. 定义一个计算属性，用于动态生成行下方的信息：

computed: {
  rowInfo(row) {
    return `这是第${row.rowIndex}行`;
  }
}

3. 在`<el-table>`标签中，给每一行添加一个`<template>`标签，当鼠标悬浮时渲染这个行下方的内容：

<el-table :data="tableData" @mouseover.native="handleMouseOver">
  <el-table-column type="index"></el-table-column>
  <template #default="{ row }">
    <!-- 其他列... -->
    <span v-if="hoveredRowIndex === row.rowIndex" style="position: absolute; bottom: 0;">{{ rowInfo(row) }}</span>
    <!-- 表格内容... -->
  </template>
</el-table>

<script setup>
import { ref, onMounted } from 'vue';

const hoveredRowIndex = ref(null);

onMounted(() => {
  // 初始化hoveredRowIndex为空
  hoveredRowIndex.value = null;
});

function handleMouseOver(event) {
  const targetRow = event.target.parentNode.__vue__;
  if (targetRow) {
    hoveredRowIndex.value = targetRow.rowIndex;
  }
}
</script>

4. 当鼠标离开当前行时，将`hoveredRowIndex`重置为null，隐藏行下方的信息：

<template #default="{ row }">
  <span v-if="hoveredRowIndex === row.rowIndex" style="position: absolute; bottom: 0;" @mouseout="hoveredRowIndex = null">{{ rowInfo(row) }}</span>
  <!-- ... -->
</template>

现在，当你把鼠标悬停在`el-table`的任何一行时，该行下面会显示“这是第n行”的提示信息。当鼠标移开，信息就会消失。