vxe-table点击单元格 弹窗就显示在单元格附近

vxe-table 是一个基于 Vue.js 的表格组件库，它提供了丰富的功能和灵活的配置选项，其中包括点击单元格弹窗显示在单元格附近的功能。

实现这个功能的方式是通过使用 vxe-table 提供的 slot 和 API。具体来说，可以在表格的 column 中定义一个 slot，然后在 slot 中使用 vxe-table 提供的 API 来实现弹窗的显示和定位。

以下是一个示例代码：

<template>
  <vxe-table :data="tableData">
    <vxe-table-column type="index" width="60"></vxe-table-column>
    <vxe-table-column field="name" title="姓名"></vxe-table-column>
    <<vxe-table-column field="age" title="年龄">
      <template #default="{ row, column }">
        <div @click="showPopover(row, column)">
          {{ row.age }}
        </div>
      </template>
    </vxe-table-column>
  </vxe-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18 },
        { name: '李四', age: 22 },
        { name: '王五', age: 30 }
      ],
      popoverVisible: false,
      popoverContent: '',
      popoverPosition: { top: 0, left: 0 }
    }
  },
  methods: {
    showPopover(row, column) {
      // 获取单元格位置信息
      const cell = this.$refs.table.getCell(row, column);
      const { top, left, height, width } = cell.getBoundingClientRect();

      // 设置弹窗位置
      this.popoverPosition = { top: top + height, left };

      // 显示弹窗
      this.popoverContent = `姓名：${row.name}，年龄：${row.age}`;
      this.popoverVisible = true;
    }
  }
}
</script>

在上面的代码中，我们在 age 列中定义了一个 slot，用来显示单元格内容，并且绑定了 click 事件。当用户点击单元格时，我们会调用 showPopover 方法来显示弹窗。

在 showPopover 方法中，我们首先获取单元格的位置信息，然后根据位置信息设置弹窗的位置。最后，我们将弹窗内容设置为当前单元格的姓名和年龄，并将弹窗显示出来。