element表格鼠標懸浮上帶有點擊事件的變紅-:row-class-name

element表格鼠標懸浮上帶有點擊事件的變紅

如圖所示

 

 

 只需要在el-table標簽上加一個:row-class-name

<el-table
   stripe
   style="width: 100%"
   :data="tableData"
   v-loading="isLoading"
   element-loading-text="加載中"
   element-loading-spinner="el-icon-loading"
   element-loading-background="rgba(0, 0, 0, 0.4)"
   :row-class-name="tableRowClassName"
   id="table"
>

　　 <el-table-column prop="name" label="考評名稱" show-overflow-tooltip :min-width="110">

             <template slot-scope="scope">

                    <a @click="getMore(scope.row)">{{ scope.row.name }}</a>

            </template>

       </el-table-column>

</rl-table>

　在methods里寫入tableRowClassName//改變當前點擊的行的class，高亮當前行

 tableRowClassName(row, index) {
       return "tableBg";
 }

在css里面寫tableBg的樣式

#table.el-table .tableBg td a {
      font-size: 14px;
      color: rgb(61, 34, 31);
    }
    #table.el-table .tableBg:hover td a {
      color: #cc0000;
      border-bottom: 1px solid#cc0000;
      cursor: pointer;
    }