快捷導(dǎo)航

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

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

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

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

示例代碼：

<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="序號" 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來判斷是否彈出提示框。

enter (row, column, cell) {
  //當(dāng)status等于0時彈出提示框
  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行懸停時彈出提示信息el-popover的實現(xiàn)的文章就介紹到這了,更多相關(guān)vue2 懸停彈出提示信息內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

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