二次加工列表，点击后背景色变化的选定效果，无法取消

resources/views/process/index.blade.php

@@ -165,10 +165,10 @@
         <table class="table table-sm text-nowrap table-bordered" id="headerParent">
             <tr class="row-even p-0" id="header"></tr>
             <template>
-            <tr v-for="(processOne,i) in processes" :class="count(i,processes)%2==0?'row-even':''" :id="processOne.id?processOne.id:processes[i-1].id+'-2'"
+            <tr v-for="(processOne,i) in processes" :class="[(count(i,processes)%2===0?'row-even':'' ),selectTr===i+1?'focusing':'']" :id="processOne.id?processOne.id:processes[i-1].id+'-2'"
                 :name="'process_table_'+count(i,processes)" @mouseover="changeStyle('process_table_'+count(i,processes),true)"
                 @mouseout="changeStyle('process_table_'+count(i,processes),false)"
-                @click="selectTableRow(i,$event)"
+                @click="selectTr===i+1?(selectTr=0):selectTr=i+1"
             >
                 <td v-if="processOne.id" :rowspan="processOne.is_multi_row?2:''">
                     <input class="checkItem" type="checkbox" :value="processOne.id" v-model="checkData">
@@ -596,15 +596,6 @@
                 },0);
             },
             methods: {
-                selectTableRow(id,e){
-                    $('#headerParent tr[class=focusing]').removeClass('focusing')
-                    if (id === this.selectTr) {
-                        this.selectTr = '';
-                        return;
-                    }
-                    this.selectTr = id;
-                    $(e.target).parent('tr').addClass('focusing')
-                },
                 arrayFilter: function (processesContents, process) {
                     if (!process.is_multi_row && process.id) return processesContents;
                     let array = [];