element-plus实现table列表单行悬停显示按钮功能

多次拒绝樱岛麻衣

于 2024-04-16 08:24:31 发布

阅读量710

点赞数 3

文章标签：前端 html vue elementui

本文链接：https://blog.youkuaiyun.com/weixin_51355842/article/details/137807293

版权

本文介绍了后端开发者如何使用Vue框架在三天内快速构建一个简单的表格，展示了如何处理鼠标悬停事件，如hoverRow和leaveRow，以及如何在el-table中实现文件名旁的分享按钮显示/隐藏功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后端萌新三天速成vue，写的很烂，凑活看看，直接上代码
html代码：

<el-table
            :data="data.tableData"
            @cell-mouse-enter="hoverRow" // 鼠标悬停单行时出发的函数
            @cell-mouse-leave="leaveRow" // 鼠标离开单行时触发的函数
        >
          <el-table-column prop="fileName" label="文件名" width="700px">
              <!--鼠标悬停某一行时需要展示的部分-->
              <div>
                <div style="float: right" v-if="data.hoverButton===scope.row.id">
                  <el-button type="primary">分享</el-button>
                </div>
              </div>
            </template>
        </el-table>

js代码：

const data = reactive({
  tableData: [
  {
    "id": "233333",
    "fileName": "hahaha"
  },{
    "id": "114514",
    "fileName": "首：啊啊啊啊"
  }
],
  hoverButton: false
})

// table行数据鼠标悬停到位事件
const hoverRow = (row) => {
  // alert(row.id)
  data.hoverButton = row.id
}
// table行数据鼠标悬停离开事件
const leaveRow = () => {
  data.hoverButton=null
}