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

项目效果展示：

代码实现：

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

代码说明：

1. 这里使用的时vue2.0+element ui实现的，并且是基于slot插槽实现的；

2. 使用的主要思想是基于JS的事件委托机制，所以事件的触发者是最大的父元素，而不能添加到每一行中；

3. 这里需要注意的是，在判断当前行的过程中，使用的id也可以换成其他能代表此行的唯一标识；

4. 这里代码没有添加css，所以导致元素出现的时候会将当前行撑大，只需要给每一行设定指定高度即可。

这里只是此组件的一小块功能应用，稍后还会继续更新，敬请期待！！！