el-table和popover踩坑,無法手動關閉popover

說明:所用popover都是click觸發;

三種使用模式:

  • 直接在頁面中使用;
  • table有fixed列,且popover在fixed中
  • table有fixed列,但是popover不在fixed列里面

1,直接在頁面中使用,最簡單,直接給el-popover設置v-model屬性就可以了

2,在fixed列中使用,需要給el-popover添加 ref屬性,通過ref屬性找到并設置display

<el-table-column label="操作" width="180px" fixed="right">
              <template slot-scope="scope">
                <span class="hk-table-option hk-table-option-first" @click="goAddFun(scope.row.id)">編輯</span>
               
                <el-popover placement="top-end" width="280" trigger="click" :ref="'popover-del-'+ scope.row.id ">
                  <p class="popover-option"><i class="el-icon-warning hk-font-highlight" ></i>&nbsp;確認刪除嗎?</p>
                  <div style="text-align: right; margin: 20px 0 0">
                    <el-button size="mini" @click="cancelDeleteFun(scope.row.id)">取消</el-button>
                    <el-button type="primary" size="mini" @click="confirmDeleteFun(scope.row.id)">刪除</el-button>
                  </div>
                  <span class="hk-table-option" slot="reference">刪除</span>
                </el-popover>

              </template>
 </el-table-column>

// 關鍵是取消方法
cancelDeleteFun(id) {
      this.$refs['popover-del-' + id].popperElm.style.display = "none" 
}

3,有fixed列,但是popover不在fixed列里面。這個最不好做,嘗試了調用doClose也無效。
最終把這種情況下的popover改為了dialog彈窗來做

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容