element表格內每一行刪除提示el-popover的使用要點

最終展示——

1、按照官網寫法，失敗。

　　點擊刪除，無法彈出提示。

<el-popover
  placement="top"
  width="160"
  v-model="visible">
  <p>這是一段內容這是一段內容確定刪除嗎？</p>
  <div style="text-align: right; margin: 0">
    <el-button size="mini" type="text" @click="visible = false">取消</el-button>
    <el-button type="primary" size="mini" @click="visible = false；open()">確定</el-button>
  </div>
  <el-button slot="reference">刪除</el-button>
</el-popover>

2、查詢后，有人提出，利用scope.row.visible替代現有的visible，

　　並且在表格數據初始化的時候，對每條數據都設置一個visible = false

　　親測有效。

　　但是當數據過多時，操作有些卡頓。

 

3、最終解決方法

<el-popover class="special-popover":ref="`popover-${scope.$index}`" placement="left" width="160">
    <p class="special-popover-title">確定刪除嗎？</p>
    <div>
        <el-button type="primary" size="mini" @click="BtnClick()">確定</el-button>
        <el-button size="mini" type="primary"  @click="handleClose(scope.$index)">取消</el-button>
    </div>
    <el-button size="mini" slot="reference">刪除</el-button>
</el-popover>
...

methods: {
    handleClose(index) {
      this.$refs[`popover-${index}`][0].doClose()
    }
}