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

后端萌新三天速成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
}