el-table和el-popover按钮控制关闭

### 使用Element UI的`el-table`和`el-popover`组件通过按钮控制Popover关闭

为了实现在使用 `el-table` 和 `el-popover` 组件时，通过按钮控制 Popover 的打开与关闭，在 Vue 中可以通过自定义事件以及对 `el-popover` 可见性的管理来完成这一目标。

#### 实现思路
1. 将 `el-popover` 的可见性绑定到一个布尔类型的变量上。
2. 在表格每一行中添加触发 Popover 显示的按钮，并设置点击事件处理器用于切换该布尔值的状态。
3. 同样地，在 Popover 内部放置另一个按钮用来手动关闭它，即再次反转这个布尔值。

下面是一个具体的代码示例：

<template>
  <div>
    <!-- 表格 -->
    <el-table :data="tableData">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="status" label="Status"></el-table-column>
      <el-table-column fixed="right" width="150px">
        <template slot-scope="scope">
          <el-button @click="handleShow(scope.row)">View Details</el-button>
          <el-popover
            v-model="popovers[scope.$index]"
            placement="top"
            title="Details"
            trigger="manual"
            content=""
          >
            <p>{{ scope.row.details }}</p>
            <el-button type="primary" size="mini" @click="hidePopover(scope.$index)"
              >Close</el-button
            >
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'Alice', status: 'Active', details: 'Detail of Alice' },
        { name: 'Bob', status: 'Inactive', details: 'Detail of Bob' }
      ],
      popovers: []
    };
  },
  created() {
    // 初始化所有行对应的popover状态为false
    this.tableData.forEach(() => this.popovers.push(false));
  },
  methods: {
    handleShow(row) {
      const index = this.tableData.indexOf(row);
      this.$set(this.popovers, index, true); // 手动更新指定索引处的数据以触发表单重新渲染
    },
    hidePopover(index) {
      this.$set(this.popovers, index, false);
    }
  }
};
</script>

在这个例子中，每当用户点击 "View Details" 按钮时会调用 `handleShow()` 函数并传入当前行的信息作为参数；而当用户想要关闭 Popover 时，则只需点击内部的小型确认按钮即可执行相应的逻辑[^1]。