【ElementUI组件刨析】Tabs组件：使用el-table实现鼠标经过某一行时隐藏或者显示按钮

本文链接：https://blog.youkuaiyun.com/io_123io_123/article/details/129589158

文章展示了如何使用Vue2.0框架结合ElementUI库，利用事件委托机制实现表格中单元格的编辑功能。当鼠标移入和移出单元格时，动态显示编辑按钮，并通过行的唯一标识进行状态判断。代码示例中，事件绑定在表格元素上，而不是每个单元格，以优化性能。

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

项目效果展示：

代码实现：

<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%"
    @cell-mouse-enter="mouseEnter"
    @cell-mouse-leave="mouseLeave"
  >
    <el-table-column fixed prop="date" label="日期" width="150">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
    <el-table-column prop="province" label="省份" width="120">
    </el-table-column>
    <el-table-column prop="city" label="市区" width="120"> </el-table-column>
    <el-table-column label="操作" width="100">
      <template slot-scope="scope">
        <el-button
          type="text"
          size="small"
          v-show="showEditFileNameButton && rowId == scope.row.__ob__.dep.id"
          @click="handleClick(scope)"
          >编辑</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>
  
  <script>
export default {
  methods: {
    //鼠标移入单元格事件
    mouseEnter(row) {
      this.showEditFileNameButton = true;
      this.rowId = row.__ob__.dep.id; //赋值行id，便于页面判断
    },
    //鼠标移出单元格事件
    mouseLeave(row) {
      this.showEditFileNameButton = false;
      this.rowId = "";
    },
  },

  data() {
    return {
      showEditFileNameButton: "",
      rowId: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1519 弄",
          zip: 200333,
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1516 弄",
          zip: 200333,
        },
      ],
    };
  },
};
</script>