无刷新填充数据时清除elementUI的elTable排序状态的className

AlexKain

于 2018-12-29 16:26:44 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

文章标签：清除elTable排序状态的className

本文链接：https://blog.youkuaiyun.com/webfullstack/article/details/85340752

在无刷新切换tab场景下，需要清除elementUI的elTable排序状态。通过DOMTokenList接口，可以实现对表格排序className的管理。当切换tab时，恢复表格的初始状态，包括移除排序条件和th的排序标志。DOMTokenList允许添加、移除标记，通过document.getElementsByClassName找到具有特定多个className的元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景复现:页面无刷新时,点击tab切换,需要清除排序条件,虽然排序条件可以清除,但是th的排序className还存在

思路:在点击切换tab时,无论是跳转新页面,还是跳转当前页面,都是恢复初始状态(清除排序条件)

/**
 * 清除点击切换step===0时,库存排序的className('descending','ascending')
  * 原因:这个时候params.orderBy已经手动重置为''了,对应的排序按钮选中颜色的className清除
  */
 var selfClassName = document.getElementsByClassName("is-sortable sortChangeClassName");
 var hasDescendingClassNameStt = false;
 var hasAscendingClassNameStt = false;
 for(var a =0;a<selfClassName.length;a++){
   // 清除倒序className
   hasDescendingClassNameStt = selfClassName[a].classList.contains('descending');
   if(hasDescendingClassNameStt){
     selfClassName[a].classList.remove('descending')
   }
   // 清除正序className
   hasAscendingClassNameStt = selfClassName[a].classList.contains('ascending');
   if(hasAscendingClassNameStt){
     selfClassName[a].classList.remove('ascending')
   }
 }