To close the el-popover when clicking its internal Cancel or Confirm buttons, you'll need to programmatically control the popover's visibility state using Vue's reactive data. Here are two common approaches depending on your UX needs:

Approach 1: Single Popover Open at a Time (Recommended) #

This method ensures only one popover is visible at once, which is cleaner for most table-based workflows.

Step 1: Update Your Script #

Add a reactive variable to track which row's popover is open, plus methods to handle opening/closing:

var vm = new Vue({ 
    el:'#app',
    data:function(){
        return {
            data:[ 
                { id:1, name: 'jak', age: 24 },
                { id:2, name: 'irol', age: 34 }
            ],
            currentOpenPopoverId: null // Tracks the ID of the open popover
        }
    },
    methods:{
        // Open popover for a specific row
        openPopover(rowId) {
            this.currentOpenPopoverId = rowId;
        },
        // Close any open popover
        closePopover() {
            this.currentOpenPopoverId = null;
        },
        // Handle confirm action then close
        confirmRemove(rowId) {
            // Add your delete logic here (e.g., remove the row from data)
            this.data = this.data.filter(item => item.id !== rowId);
            // Close the popover after the action
            this.closePopover();
        }
    }
}) 

Step 2: Update Your Template #

Bind the popover's visible prop to check if the current row matches the open ID, and set trigger="manual" to disable default trigger behavior:

<el-table :data="data" border>
  <el-table-column prop="name" label="Name"></el-table-column>
  <el-table-column prop="age" label="Age"></el-table-column>
  <el-table-column label="Actions">
    <template slot-scope="scope">
      <!-- Trigger button to open popover -->
      <el-button type="text" @click="openPopover(scope.row.id)">Edit/Delete</el-button>
      
      <!-- Popover component -->
      <el-popover
        :visible="currentOpenPopoverId === scope.row.id"
        trigger="manual"
        placement="top"
        width="200"
      >
        <div>Are you sure you want to delete this item?</div>
        <div style="text-align: right; margin-top: 10px;">
          <el-button type="text" size="small" @click="closePopover">Cancel</el-button>
          <el-button type="primary" size="small" @click="confirmRemove(scope.row.id)">Confirm</el-button>
        </div>
      </el-popover>
    </template>
  </el-table-column>
</el-table>

Approach 2: Allow Multiple Popovers Open Simultaneously #

If you need multiple popovers open at once, use an object to track visibility for each row individually:

Step 1: Update Script #

var vm = new Vue({ 
    el:'#app',
    data:function(){
        return {
            data:[ 
                { id:1, name: 'jak', age: 24 },
                { id:2, name: 'irol', age: 34 }
            ],
            popoverVisibility: {} // Key: row ID, Value: boolean (visible state)
        }
    },
    methods:{
        // Toggle popover visibility for a row
        togglePopover(rowId) {
            this.$set(this.popoverVisibility, rowId, !this.popoverVisibility[rowId]);
        },
        // Handle confirm action then close
        confirmRemove(rowId) {
            // Delete logic here
            this.data = this.data.filter(item => item.id !== rowId);
            // Close the popover
            this.$set(this.popoverVisibility, rowId, false);
        }
    }
}) 

Step 2: Update Template #

<el-table :data="data" border>
  <!-- ... other columns ... -->
  <el-table-column label="Actions">
    <template slot-scope="scope">
      <el-button type="text" @click="togglePopover(scope.row.id)">Edit/Delete</el-button>
      
      <el-popover
        :visible="popoverVisibility[scope.row.id] || false"
        trigger="manual"
        placement="top"
        width="200"
      >
        <div>Are you sure you want to delete this item?</div>
        <div style="text-align: right; margin-top: 10px;">
          <el-button type="text" size="small" @click="togglePopover(scope.row.id)">Cancel</el-button>
          <el-button type="primary" size="small" @click="confirmRemove(scope.row.id)">Confirm</el-button>
        </div>
      </el-popover>
    </template>
  </el-table-column>
</el-table>

Key Notes: #

• Use trigger="manual" whenever you control popover visibility programmatically—this turns off default hover/click triggers.
• In Approach 2, use this.$set to ensure Vue detects changes to the popoverVisibility object (Vue can't track additions to plain objects automatically).

内容的提问来源于stack exchange，提问作者pssgo