Vue?ElementUI在el-table中怎么使用el-popover

本文小編為大家詳細介紹“Vue ElementUI在el-table中怎么使用el-popover”，內容詳細，步驟清晰，細節處理妥當，希望這篇“Vue ElementUI在el-table中怎么使用el-popover”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

ElementUI在el-table中使用el-popover

Vue ElementUI在el-table中使用el-popover，點擊嵌套內容中的確定或取消來關閉el-popover。

<el-table-column width="100" align="center" label="操作">
  <template slot-scope="scope">
    <el-popover width="160" :ref="`popover-${scope.$index}`">
      <p>確定刪除該項嗎？</p>
      <div >
        <el-button type="text" size="mini" @click="scope._self.$refs[`popover-${scope.$index}`].doClose()">
          取消
        </el-button>
        <el-button type="danger" size="mini" >確定</el-button>
      </div>
      <el-button type="text" slot="reference">刪除</el-button>
    </el-popover>
  </template>
</el-table-column>

方法二

<el-table-column width="100" align="center" label="操作">
  <template slot-scope="scope">
    <el-popover width="160" :ref="`popover-${scope.$index}`">
      <p>確定刪除該項嗎？</p>
      <div >
        <el-button type="text" size="mini" @click="handleClose(scope.$index)">
          取消
        </el-button>
        <el-button type="danger" size="mini" >確定</el-button>
      </div>
      <el-button type="text" slot="reference">刪除</el-button>
    </el-popover>
  </template>
</el-table-column>

<script>
 ...
   handleClose(index) {
     this.$refs[`popover-${index}`].doClose()
   }
 ...
</script>

方法三

<div ref="closepopover">
<el-table-column  label="操作">
 <template slot-scope="item">
  <el-popover
    placement="right"
    title="確定刪除？"
    width="200"
    v-model="item.row.visible"
    trigger="click">
    <div >
      <el-button size="mini" type="text" @click="updateVisible()">取消</el-button>
      <el-button type="primary" size="mini" @click="updateVisible()">確定</el-button>
    </div>
    <el-button slot="reference">刪除</el-button>
  </el-popover>
</template >
</el-table-column>


//也可解決
updateVisible(){
    this.$refs.closepopover.click();
}

el-popover在el-table中會出現不顯示情況

Popover 的屬性與 Tooltip 很類似 都是彈出提示，一般情況下，如果是固定提示內容的話，采取Tooltip 簡單了事。

接觸到一個需求，el-table其中一列，根據后端返回的數據不同展示不同的 btn，其中一個btn 需要鼠標hover 的時候 獲取該行元素的 id（需要在hover的時候 通過調接口獲?。?，此時使用Tooltip就無法達到動態顯示提示內容的效果了。

Popover 在基于Tooltip 有@show事件，當提示內容hover的時候，可以觸發@show回調，此時可以去請求后端接口獲取需要的數據。

問題： 在el-table-column 內 使用el-popover 有時候會出現hover 不顯示提示框的情況

總所周知，el-table-column 代表的是 列，在其中寫 一個el-popover ，其相當于 寫了N個，（N取決于el-table 中 data 的 數組長度） table 常常 與 分頁 一起使用

以下屬于個人猜測，為了解釋給自己聽的

由于el-table data數據長度，遍歷出多個 el-popover 而 el-popover 是根據條件row.staus === 1 判斷是否出現的 （其中el-popover 的一些熟悉 就不寫了）

<el-table-column >
 <template #default="{row}">
  <el-popover ....>
    <span>需要顯示的文本內容</span>
    <div slot="reference" v-if="row.status === 1">查看內容</div>
  </el-popover>
  <div v-if="row.status === 2">暫無內容</div>
 </template>
</el-table-column>

此時可能會出現一種情況，第一頁table 有10條數據， 其中第一條 和 第5條的row.status === 1 

第二頁 只有2條數據，第一條row.status === 2 第二條 row.status === 2

bug 復現： 當我第一次進入頁面， hover 第一頁的第一條數據 能夠正常顯示 <span>內容，也能正常顯示第五條<span>內容，

當我切換到第二頁，由于第二頁只有兩條數據，而且status === 2 所以 hover 是不會顯示數據的， 這個時候 我再切換到第一頁，再次hover 到第一條數據發現，此時row.status === 1 的那條數據不再顯示<span>內容了 然而 第一頁的 第五條數據 row.status ===1 hover 還是能正常顯示<span>內容

經過上述操作，（個人覺得，沒有官方判斷）第一頁的第一條本應該hover 展示<span>內容的 卻沒有展示 是因為 可能復用了 第二頁第一條row.status === 2 的el-popover

為了防止 el-popover 復用，采取兩個方法 ：

1. 給el-popover不同的ref

2. 將v-if 判斷同步移到 el-popover里

<el-table-column >
 <template #default="{row}">
  <el-popover v-if="row.status === 1" :ref="`node-${row.id}`">
    <span>需要顯示的文本內容</span>
    <div slot="reference" v-if="row.status === 1">查看內容</div>
  </el-popover>
  <div v-if="row.status === 2">暫無內容</div>
 </template>
</el-table-column>

當 row.status !==1 時 el-popover 自然而然就被銷毀了，也就不存在復用的情況，若出現第一頁 和 第二頁 都是row.status === 1 的情況，此時 由于ref 不同也不會復用  （下劃線內容 為個人判斷）

經過上述操作，大致能解決 el-popover 不顯示的問題 （由于個人對該組建理解不是很深刻，所以不敢打包票 百分百解決）

額外內容：

通過查看el-popover 的源碼 發現 存在一些 element 組件options沒有 給出的一些方法，可以配合 ref 一起使用，能實現一些特殊功能的處理 。 通過 this.$refs['el-popover的ref'].方法()

通過查看源碼可以發現，el-popover 中的methods 有以下幾個方法：

• doShow() : 展示el-popover

• doClose() : 關閉el-popover

• doToToggle() : 取反  關閉則展示，展示則關閉

tips:

當el-popover 內 不寫 slot=“reference” 其中內容是不會展示（div內容）的 例如：

<el-popover>
 <div>沒有使用slot插槽</div>
</el-popover>

讀到這里，這篇“Vue ElementUI在el-table中怎么使用el-popover”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。