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

·  阅读 1220

效果:

  1. table代码:

image.png

<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>
  1. 重点: @cell-mouse-enter鼠标移入 @cell-mouse-leave="mouseLeave"鼠标移出
  2. 初始化表格数据,定义showIcon字段为false
methods:{
    this.dataList.forEach((item) => {
        item.showIcon = false
    })
}
  1. 自定义弹出提示内容:
<el-popover
    placement="top-start"
    width="200"
    trigger="hover"
    content="我是提示内容">
    <el-button slot="reference" type="text">{{ scope.$index + 1 }}</el-button>
 </el-popover>
  1. 鼠标移入、移除事件:
methods:{
    mouseOver(row) {
        row.showIcon = true
    },
    mouseLeave(row) {
        row.showIcon = false
    },
}
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改