解决el-table 树形结构expand 操作后 stripe 显示失效问题

昨天是挫败感较大的一天，因为好久没有真正的精进技术了，事件循环机制 、nextTick 之前条件反射都会想到的问题，昨天竟然被困住了。

问题背景

项目中用到了el-table的树形结构，table 设置了 stripe 栅格属性，但是由于有展开行，展开后table 按照展开后的所有数据进行了栅格设置，但当展开收起时，栅格的设置是没变的，会导致看上去有写地方栅格失效。如下图：

 在ElementUI 文档看了el-table 的方法，没有什么可以设置的，项目中用的懒加载，数据也不在tableData 集合中 ，即使放进去也没有用，本来想来改变 children 集合数据，发现当children 设置[] 空数组时 ，可以展开的标识就没有了，这块的设计着实有点不太合理了。

问题解决

三人行 必有我师焉 。

自己的思路：我自己对操作DOM真的不如逻辑顺手，我的第一个想法就是处理数据，根据折叠展开，将数据进行处理，标记这一行该是什么颜色等，想着就比较复杂。

同事提供思路：根据展开或者折叠后页面所展示的table行，重新进行行样式的设置，就是把页面中当前展示的所有行放在一个集合里，然后根据栅格理论重新设置行样式。

最终还是操作DOM 这样比较直接 不用太多的判断和数据操作。

实践中遇到的问题：思路有了，但是这个操作写在哪呢，想要的是table 的每次展开和折叠才做都要重新手动设置一遍样式，第一反应放在 el-table @expand-change 监听中。这个监听事件就是监听table 的折叠和展开的。但是此事件触发时，页面是还没有 展开 和 收起 前 此方法获取页面的DOM 还是页面改变前的，没有意义。

问题解决：上面问题是触发了事件 ，但是页面还没有更新，而我的需求是要获取页面更新之后的所有显示的 行元素 ，怎么办？？？ 放在事件循环的next tick ,可以将自己更新样式的代码放在一个定时器中 ，也可以使用vue的$nextTick 回调中。

部分代码

resetRowBgColor() {
      var trs = document.querySelectorAll('.el-table__body-wrapper tr');
      var shows = [];
      for (var i = 0; i < trs.length; i++) {
          if (trs[i].style.display != 'none' && trs[i].offsetHeight != 0) {
              shows.push(trs[i]);
          }
      }
      for (var i = 0; i < shows.length; i++) {
          if (i % 2 == 0) {
             // 对应背景颜色设置
          } else {
             // 对应背景颜色设置
          }
      }
    }

技术还是得时常用，经常学。