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

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組件，當然你也可以選擇在其他字段的位置來顯示提示框，看自己的需求了。

示例代碼：

<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="標題" 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ù)狀態(tài)status來判斷是否彈出提示框。

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

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

相關文章

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

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

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

    詳解vue幾種主動刷新的方法總結

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

    • 最新評論