快捷導(dǎo)航

vue2 el-table行懸停時(shí)彈出提示信息el-popover的實(shí)現(xiàn)

更新時(shí)間：2024年01月12日 11:52:29 作者：黑睿

本文主要介紹了vue2 el-table行懸停時(shí)彈出提示信息el-popover的實(shí)現(xiàn),用到了cell-mouse-enter、cell-mouse-leave兩個(gè)事件,具有一定的參考價(jià)值,感興趣的可以了解一下

實(shí)現(xiàn)方法，用到了cell-mouse-enter、cell-mouse-leave兩個(gè)事件，然后在表格的首列字段中，加個(gè)el-popover組件，當(dāng)然你也可以選擇在其他字段的位置來(lái)顯示提示框，看自己的需求了。

示例代碼：

<el-table @cell-mouse-enter="enter" @cell-mouse-leave="leave" :data="[{rowIndex:100, title:'行一', status: 1},{rowIndex:200, title:'行二', status: 0}]">
  <el-table-column label="序號(hào)" width="100">
    <template slot-scope="scope">
      <el-popover trigger="manual" placement="right" :ref="'popover'+(scope.row.rowIndex)">
        <div>彈出popover提示內(nèi)容</div>
        <div slot="reference">{{ scope.$index+1 }}</div>
      </el-popover>
    </template>
  </el-table-column>
  <el-table-column label="標(biāo)題" prop="title"></el-table-column>
</el-table>

enter (row, column, cell) {
  this.$refs['popover' + row.rowIndex].showPopper = true
},
leave (row, column, cell) {
  this.$refs['popover' + row.rowIndex].showPopper = false
}

在enter方法中，還可以根據(jù)row行數(shù)據(jù)進(jìn)行一些處理，比如根據(jù)狀態(tài)status來(lái)判斷是否彈出提示框。

enter (row, column, cell) {
  //當(dāng)status等于0時(shí)彈出提示框
  if(row.status===0) {
    this.$refs['popover' + row.rowIndex].showPopper = true
  }
},
leave (row, column, cell) {
  this.$refs['popover' + row.rowIndex].showPopper = false
}

到此這篇關(guān)于vue2 el-table行懸停時(shí)彈出提示信息el-popover的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue2 懸停彈出提示信息內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue 簡(jiǎn)單自動(dòng)補(bǔ)全的輸入框的示例
這篇文章主要介紹了vue 簡(jiǎn)單自動(dòng)補(bǔ)全的輸入框的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
Vue利用mockjs編寫(xiě)假數(shù)據(jù)并應(yīng)用的問(wèn)題記錄
這篇文章主要介紹了Vue利用mockjs編寫(xiě)假數(shù)據(jù)并應(yīng)用,本文通過(guò)實(shí)例代碼給大家詳細(xì)講解，對(duì)Vue?mockjs數(shù)據(jù)相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧
2022-12-12
vue項(xiàng)目啟動(dòng)端口更改的實(shí)現(xiàn)
在Vue前端項(xiàng)目中,可以通過(guò)修改配置文件來(lái)指定啟動(dòng)的端口號(hào),本文就來(lái)介紹一下vue項(xiàng)目啟動(dòng)端口更改的實(shí)現(xiàn),感興趣的可以了解一下
2023-10-10
vue實(shí)現(xiàn)搜索小功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)搜索小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-11-11
vue如何調(diào)用瀏覽器分享功能詳解
這篇文章主要給大家介紹了關(guān)于vue如何調(diào)用瀏覽器分享的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
解決vue中l(wèi)ess的使用問(wèn)題
這篇文章主要介紹了解決vue中l(wèi)ess的使用問(wèn)題,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-11-11
如何使用vue自定義指令構(gòu)建拖放插件
這篇文章主要介紹了如何使用vue自定義指令構(gòu)建拖放插件，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下
2021-04-04
vue遮罩層如何阻止?jié)L動(dòng)
這篇文章主要介紹了vue遮罩層如何阻止?jié)L動(dòng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
Vue多種方法實(shí)現(xiàn)表頭和首列固定的示例代碼
本篇文章主要介紹了Vue多種方法實(shí)現(xiàn)表頭和首列固定的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
vue-cli對(duì)element-ui組件進(jìn)行二次封裝的實(shí)戰(zhàn)記錄
組件類似于需要多個(gè)地方用到的方法,在Vue中組件就是一種復(fù)用（經(jīng)常使用）一個(gè)功能的手段,下面這篇文章主要給大家介紹了關(guān)于Vue?element?ui二次封裝的相關(guān)資料,需要的朋友可以參考下
2022-06-06