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);
},