vue 鼠标移入不同div悬浮显示不同的表格el-table内容，鼠标移出悬浮内容消失

在Vue中，可以使用el-popover组件来实现鼠标移入不同div悬浮显示不同的表格内容。下面是一个简单的示例：

<template>
  <div>
    <div
      v-for="item in items"
      :key="item.id"
      @mouseenter="currentTableData = item"
      @mouseleave="currentTableData = null"
      style="margin-bottom: 10px; cursor: pointer;"
    >
      <el-popover
        :ref="`popover-${item.id}`"
        placement="top"
        width="200"
        trigger="manual"
        :open-delay="500"
        :value="currentTableData === item"
        @show="currentTableData = item"
        @hide="currentTableData = null"
      >
        <el-table :data="[item]">
          <el-table-column property="date" label="日期"></el-table-column>
          <el-table-column property="name" label="姓名"></el-table-column>
          <el-table-column property="address" label="地址"></el-table-column>
        </el-table>
        <div slot="reference">鼠标移入这里查看详情</div>
      </el-popover>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: [
        { id: 1, date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { id: 2, date: '2016-05-04', name: '李小虎', address: '上海市普陀区金沙江路 1517 弄' },
        // ...更多数据
      ],
      currentTableData: null,
    };
  },
};
</script>

在这个示例中，我们有一个items数组，它包含了要显示在表格中的数据。对于数组中的每个项，我们使用el-popover组件来在鼠标悬浮时显示表格。通过currentTableData来控制哪个表格是打开的。鼠标移入时设置currentTableData为当前项，鼠标移出时设置为null以关闭悬浮内容。ref属性用于关联每个el-popover和它应该显示的数据项。