el-table悬停当前行,显示当前行操作按钮,取消当前行悬停,当前行按钮隐藏

<el-table
      @cell-mouse-enter="hoverRow"
      v-if="tableData.length > 0"
      @cell-mouse-leave="leaveRow"//关键
      @sort-change="sortChange"//关键
      :header-cell-style="{'text-align':'center'}"
      :cell-style="{'text-align':'center'}"
      class="table-style"
      :data="tableData"
    >

<el-table-column>
	 <templateslot-scope="scope">
	   <div style="color:#ffbf00;" v-show="scope.row.showRightOp">//关键
	     <span v-if="scope.row.partnerInfo.status == '1'">
	       <span @click="partnerOp(2,scope.row.partnerInfo.userId)" style="cursor: pointer;">注销</span>
	     </span>
	     <span v-if="scope.row.partnerInfo.status == '2'">
	       <span @click="partnerOp(1,scope.row.partnerInfo.userId)" style="cursor: pointer;">启用</span>
	       <span @click="partnerOp(0,scope.row.partnerInfo.userId)" style="margin-left:40px;cursor: pointer;">删除</span>
	     </span>
	   </div>
	 </template>
</el-table-column>

    getTableData() {
      this.tableData = [];
      let req = {
        curPage: this.currentPage,
        pageSize: this.pageSize,
        startDate: this.pickerVal[0],
        endDate: this.pickerVal[1],
        partnerName: this.inputVal,
        orderBy: this.orderBy,
        orderType: this.orderType
      };
      this.$axios
        .get("/manage/partner/info/list", { params: req })
        .then(resp => {
          if (resp.data.responseCode == 200) {
            if (resp.data.data) {
              this.tableData = resp.data.data;//请求表格数据,拿到tableData 
              this.totalNum = resp.data.totalCount;
              this.tableData.map((item, index) => {
                item.showRightOp = false;  //需要先在tableData数组中每个元素添加showRightOp为false
              });
            }
          }
        });
    },

hoverRow(row) {
  row.showRightOp = true;
  this.$set(this.tableData, row.index, row);
},
leaveRow(row) {
  row.showRightOp = false;
  this.$set(this.tableData, row.index, row);
},