el-popover 嵌套table 数据请求 无法加载

### 解决 `el-popover` 嵌套 `table` 数据请求不显示的问题

当在 `el-popover` 中嵌套 `el-table` 并尝试动态加载数据时，可能会遇到数据无法正常显示的情况。这通常是因为 `el-popover` 的可见性控制逻辑与异步数据获取之间存在冲突。

#### 方案一：延迟初始化表格数据

通过监听 `el-popover` 的打开事件，在弹窗展示后再发起数据请求并更新表格数据。这样可以确保每次点击触发 `el-popover` 显示时都能重新拉取最新的数据[^1]。

methods: {
    fetchData(rowId){
        this.$axios.get(`/api/data/${rowId}`)
            .then(response => {
                this.tableData = response.data;
            });
    },
    handleOpenPopover(row){
        // 记录当前行id用于后续查询
        this.currentRowId = row.id;

        // 清空旧的数据防止缓存影响
        this.tableData = [];

        // 手动调用接口获取新数据
        this.fetchData(this.currentRowId);
        
        // 设置popover为true使其展开
        setTimeout(() => {this.rowVisible[row.id]= true},0);  
    }
}

为了实现这一点，需要调整模板中的代码结构：

<template>
  <!-- ... -->
  <el-button type="text" @click="handleOpenPopover(scope.row)">查看</el-button>

  <el-popover :ref="'popover-' + scope.row.id"
              placement="right"
              width="400"
              trigger="manual"
              v-model="rowVisible[scope.row.id]"
              @show="fetchData(scope.row.id)">
      <el-table :data="tableData">
          <!-- 表格列定义... -->
      </el-table>
  </el-popover>
  <!-- ... -->
</template>

这里使用了 `trigger=manual` 和 `v-model` 来手动管理 popover 的显隐状态，并利用 `@show` 钩子函数来执行数据抓取操作[^2]。

#### 方案二：懒加载模式下的优化

另一种方法是在首次访问时才去加载对应的内容，即采用懒加载的方式处理。这种方式下不需要每次都发送网络请求，而是仅当用户真正点击查看某条记录详情的时候才会去请求该条目的具体信息。

对于这两种方式的选择取决于实际应用场景的需求以及性能考虑因素。如果是小型应用或者列表项数量不多的情况下可以直接选用第一种方案；而对于大型项目则建议优先考虑第二种策略以减少不必要的资源消耗。