iview的table渲染及js修改伪元素的值

此处用的是iview的table组件，项目中要根据后端传过来的颜色值改变表格中小雨滴的颜色

  {
         title: '颜色',
         key: 'nameColor',
         render: (h, params) => {
               this.oil_color=params.row.nameColor
               this._index=params.row._index                   
               return h('div',{
                 class:'sd_color', 
               });
         } 
  }

因为图中小雨滴是通过设置.sd_color的伪元素的样式来实现的，所以动态修改色值稍微有点麻烦，顺便附上小雨滴实现代码

.sd_color
      height 40px 
      display block 
      position relative
      width 26px
      transform  rotate(180deg)
      &:after
        content:'';
        height:15px;
        width:15px; 
        display:block; 
        position:absolute;
        top:10px; 
        left:5px; 
        z-index:1; 
        line-height:26px; 
        background:#333; /********项目中要修改的色值*********/
        border-radius:40px;
        -webkit-border-radius:40px;
        -moz-border-radius:40px; 
        color:#fff;
        text-align:center;
      &:before
        content '' 
        height 0px 
        width 0px 
        display block 
        position absolute 
        bottom 7px 
        left 6px 
        border 10px transparent solid
        border-top-color #333  /********项目中要修改的色值*********/
        border-width 11px 6px 0px 7px

接下来就要通过js找到该属性，并修改

 changeColor(){
         //1.找到index.html中的style标签
         var sheet=document.getElementsByTagName('head')[0];
         //2.找到要修改样式的元素（注意此处有坑，下面会讲到）
         var pp=document.getElementsByClassName('sd_color');
         //3.遍历
         for(var i=0;i<this.data1.length;i++){
           //4.为每个元素添加新的类
           pp[i].classList.add('sd_color'+i)
           //5.设置新类的伪元素的样式
           var tt=`
           .sd_color${i}:after{background:${this.data1[i].nameColor}!important;}
           .sd_color${i}::before{border-top-color:${this.data1[i].nameColor}!important; }`
           //6.将修改后的样式添加到style文件中（注意：此处的children里的值根据自己项目改变，我的项目中style标签处于第八个，所以下标为7，如下图）
           sheet.children[7].innerHTML+=tt
         }
  },

接下来再说遇到的坑

如果表格中的数据是动态获取的，那么上面?所说的就要出现了
 var pp=document.getElementsByClassName('sd_color');
 得到的数据如下图，该数据是不能遍历的，那么如何解决呢？next?

猜测应该是vue生命周期的问题，data里的值改变会重新渲染dom树，而此时会进入updated这个钩子函数，
所以在该函数中调用上述方法就?了，之后再打印pp，结果变成如下可遍历的数组

大功告成，一位才疏学浅的前端妹子，欢迎指教，?