實(shí)現(xiàn)方法,用到了cell-mouse-enter、cell-mouse-leave兩個(gè)事件,然后在表格的首列字段中,加個(gè)el-popover組件,當(dāng)然你也可以選擇在其他字段的位置來(lái)顯示提示框,看自己的需求了。
示例代碼:文章來(lái)源:http://www.zghlxwxcb.cn/news/detail-800159.html
<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)判斷是否彈出提示框。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-800159.html
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的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!