ElementUI在el-table中使用el-popover

Vue ElementUI在el-table中使用el-popover，點(diǎn)擊嵌套內(nèi)容中的確定或取消來關(guān)閉el-popover。

<el-table-column width="100" align="center" label="操作">
? <template slot-scope="scope">
? ? <el-popover width="160" :ref="`popover-${scope.$index}`">
? ? ? <p>確定刪除該項(xiàng)嗎？</p>
? ? ? <div style="text-align: right; margin: 0">
? ? ? ? <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>確定刪除該項(xiàng)嗎？</p>
? ? ? <div style="text-align: right; margin: 0">
? ? ? ? <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 style="text-align: right; margin: 0">
? ? ? <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中會(huì)出現(xiàn)不顯示情況

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

接觸到一個(gè)需求，el-table其中一列，根據(jù)后端返回的數(shù)據(jù)不同展示不同的 btn，其中一個(gè)btn 需要鼠標(biāo)hover 的時(shí)候 獲取該行元素的 id（需要在hover的時(shí)候 通過調(diào)接口獲?。?，此時(shí)使用Tooltip就無法達(dá)到動(dòng)態(tài)顯示提示內(nèi)容的效果了。

Popover 在基于Tooltip 有@show事件，當(dāng)提示內(nèi)容hover的時(shí)候，可以觸發(fā)@show回調(diào)，此時(shí)可以去請(qǐng)求后端接口獲取需要的數(shù)據(jù)。

問題： 在el-table-column 內(nèi) 使用el-popover 有時(shí)候會(huì)出現(xiàn)hover 不顯示提示框的情況

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

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

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

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

此時(shí)可能會(huì)出現(xiàn)一種情況，第一頁table 有10條數(shù)據(jù)， 其中第一條 和 第5條的row.status === 1 

第二頁 只有2條數(shù)據(jù)，第一條row.status === 2 第二條 row.status === 2

bug 復(fù)現(xiàn)： 當(dāng)我第一次進(jìn)入頁面， hover 第一頁的第一條數(shù)據(jù) 能夠正常顯示 <span>內(nèi)容，也能正常顯示第五條<span>內(nèi)容，

當(dāng)我切換到第二頁，由于第二頁只有兩條數(shù)據(jù)，而且status === 2 所以 hover 是不會(huì)顯示數(shù)據(jù)的， 這個(gè)時(shí)候 我再切換到第一頁，再次hover 到第一條數(shù)據(jù)發(fā)現(xiàn)，此時(shí)row.status === 1 的那條數(shù)據(jù)不再顯示<span>內(nèi)容了 然而 第一頁的 第五條數(shù)據(jù) row.status ===1 hover 還是能正常顯示<span>內(nèi)容

經(jīng)過上述操作，（個(gè)人覺得，沒有官方判斷）第一頁的第一條本應(yīng)該hover 展示<span>內(nèi)容的 卻沒有展示 是因?yàn)?可能復(fù)用了 第二頁第一條row.status === 2 的el-popover

為了防止 el-popover 復(fù)用，采取兩個(gè)方法 ：

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>需要顯示的文本內(nèi)容</span>
? ? <div slot="reference" v-if="row.status === 1">查看內(nèi)容</div>
? </el-popover>
? <div v-if="row.status === 2">暫無內(nèi)容</div>
?</template>
</el-table-column>

當(dāng) row.status !==1 時(shí) el-popover 自然而然就被銷毀了，也就不存在復(fù)用的情況，若出現(xiàn)第一頁 和 第二頁 都是row.status === 1 的情況，此時(shí) 由于ref 不同也不會(huì)復(fù)用  （下劃線內(nèi)容 為個(gè)人判斷）

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

額外內(nèi)容：

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

通過查看源碼可以發(fā)現(xiàn)，el-popover 中的methods 有以下幾個(gè)方法：

• doShow() : 展示el-popover
• doClose() : 關(guān)閉el-popover
• doToToggle() : 取反  關(guān)閉則展示，展示則關(guān)閉

tips:

當(dāng)el-popover 內(nèi) 不寫 slot=“reference” 其中內(nèi)容是不會(huì)展示（div內(nèi)容）的 例如：

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

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論