vue 实现鼠标移入移出表格，显示影藏图标, 并弹出提示内容

效果：

1. Table代码

<el-table :data="tableData" ref="multipleTable" class="multTable" 
    row-key="id"  @cell-mouse-enter="mouseOver"  @cell-mouse-leave="mouseLeave">
    <el-table-column type="index" label="优先级" width="100px">
        <template slot-scope="scope">
            <i class="iconfont" v-show="scope.row.showIcon">&#xe6ec;</i>
            <el-popover
                placement="top-start"
                width="200"
                trigger="hover"
                content="我是提示内容">
                <el-button slot="reference" type="text">{{ scope.$index + 1 }}</el-button>
             </el-popover>
         </template>
      </el-table-column>
 <el-table>

2. 重点： @cell-mouse-enter鼠标移入 @cell-mouse-leave="mouseLeave"鼠标移出

3. 初始化表格数据，定义showIcon字段为false

methods：{
    this.dataList.forEach((item) => {
        item.showIcon = false
    })
}

4. 自定义弹出提示内容：

<el-popover
    placement="top-start"
    width="200"
    trigger="hover"
    content="我是提示内容">
    <el-button slot="reference" type="text">{{ scope.$index + 1 }}</el-button>
 </el-popover>

5. 鼠标移入、移除事件：

methods：{
    mouseOver(row) {
        row.showIcon = true
    },
    mouseLeave(row) {
        row.showIcon = false
    },
}

end...

掘金