JS写出表格排序的功能

 <div class="virtual-table-th">
      <span
        v-for="(item, index) in column"
        :key="item.field"
        name="span-virtual" //添加类名方便寻找DOM
        :style="item.width ? `width: ${item.width}px` : 'flex: 1'"
        :class="'col_' + `${index}`" //区别表头列
        >{{ item.title
        }}<span class="caret-virtual" v-if="item.sortable">  //排序按钮
          <i
            class="sort-caret ascending"
            @click="sortableList('ASC', item.field, index)"
          ></i>
          <i
            class="sort-caret descending"
            @click="sortableList('DESC', item.field, index)"
          ></i> </span
      ></span>
    </div>

 function sortableList(item: any, val: any, index: any) {
      if (props.sortChange) {
        props.sortChange(item, val);  //父组件的方法
      }
      if (item == "ASC") {
           //点击升序
        document.getElementsByName("span-virtual")[index].setAttribute("class", "ascen");
      } else {
            //点击降序
        document.getElementsByName("span-virtual")[index].setAttribute("class", "descen");
      }
    }

.ascen {
  .ascending {
    border-bottom-color: #bf1110 !important;
  }
}
.descen {
  .descending {
    border-top-color: #bf1110 !important;
  }
}

排序功能是跟后端配后完成，点击按钮调后端接口，但在写排序按钮的时候发现点击按钮同步了点击高亮样式，困惑了一下下，所以记录一下