El table Click to add row style

  <el-table
        :data="tableData"
        border
        :max-height="200"
        :style="{
    
          borderColor: showPanelTableStyle.borderColor,
          width: `210px`,
        }"
        :cell-style="{
    
          borderColor: showPanelTableStyle.borderColor,
          fontFamily: showPanelTableStyle.cellFontFamily,
          fontSize: `${
      showPanelTableStyle.cellFontSize}px`,
          color: showPanelTableStyle.cellFontColor,
          backgroundColor: showPanelTableStyle.cellBgColor,
          padding: 0,
          height: `40px`,
        }"
        :header-cell-style="{
    
          borderColor: showPanelTableStyle.borderColor,
          fontFamily: showPanelTableStyle.headerFontFamily,
          fontSize: `${
      showPanelTableStyle.headerFontSize}px`,
          color: showPanelTableStyle.headerFontColor,
          backgroundColor: showPanelTableStyle.headerBgColor,
          padding: 0,
          height: '40px',
        }"
        :row-class-name="tableRowClassName"
        @row-click="onRowHandler($event)"
      >
      </el-table>

 	:row-class-name="tableRowClassName"

    tableRowClassName({
     row, rowIndex }) {
    
      if (!this.vueData) return;
      //  The currently selected line id  And   Table row comparison 
      if (this.vueData.currentDataId == row.id) {
    
        return "success-row";  
      }
      return "";
    },
.success-row {
    
  background: #0c90b8;
}

el-table Mouse over , Row style

.el-table tbody tr:hover>td {
     
  background-color:rgba(220, 220, 220, 0.2)!important;
  color:#000
}