欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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 quill editor 使用富文本添加上傳音頻功能

    vue quill editor 使用富文本添加上傳音頻功能

    vue-quill-editor 是vue項(xiàng)目中常用的富文本插件，其功能能滿(mǎn)足大部分的項(xiàng)目需求。這篇文章主要介紹了vue-quill-editor 富文本添加上傳音頻功能,需要的朋友可以參考下
    2020-01-01
  • 詳解vue幾種主動(dòng)刷新的方法總結(jié)

    詳解vue幾種主動(dòng)刷新的方法總結(jié)

    這篇文章主要介紹了詳解vue幾種主動(dòng)刷新的方法總結(jié)，文中詳細(xì)的介紹了幾種方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2019-02-02

    • 最新評(píng)論