效果:

image.png

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...

掘金

Logo

前往低代码交流专区

更多推荐