vue2 el-table行悬停时弹出提示信息el-popover

在Vue 2中，可以通过监听el-table的row-mouse-enter和row-mouse-leave事件来实现行悬停时弹出提示信息。你可以使用el-popover组件来显示提示信息。以下是一个简单的示例：

<template>
  <el-table
    :data="tableData"
    @row-mouse-enter="handleMouseEnter"
    @row-mouse-leave="handleMouseLeave"
  >
    <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="地址"></el-table-column>
    <el-popover
      ref="popover"
      placement="top"
      width="200"
      v-model="showPopover"
      trigger="manual"
      content="这是悬停行的提示信息"
    ></el-popover>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }],
      currentRow: null,
      showPopover: false,
    };
  },
  methods: {
    handleMouseEnter(row, event, column) {
      this.currentRow = row;
      this.openPopover(event);
    },
    handleMouseLeave(row, event, column) {
      this.currentRow = null;
      this.closePopover();
    },
    openPopover(event) {
      this.showPopover = true;
      this.$nextTick(() => {
        this.$refs.popover.referenceElm = event.target;
      });
    },
    closePopover() {
      this.showPopover = false;
    },
  },
};
</script>

在这个示例中，el-table的每一行都会在鼠标悬停时调用handleMouseEnter方法，并通过el-popover的v-model绑定来显示提示信息。鼠标离开行时，handleMouseLeave方法被调用并关闭提示信息。通过设置el-popover的trigger属性为manual，可以手动控制弹窗的显示和隐藏。