动态添加伪类样式

<table border="0" class="chartContent" >
                        <tr>
                            <td v-for="(item, i) in theader" :key="i">{{item}}</td>
                        </tr>
                        <tr v-for="(item, i) in tableData" :key="i">
                            <td :data-width='item.ratio'  ref="tds" :class="`progress${i}`">{{item.name}}</td>
                            <td>{{item.done}}</td>
                            <td>{{item.do}}</td>
                            <td :class="`color${i + 1}`">
                                <span>{{item.ratio}}</span>
                                <img :src="arrowDown[i]" alt="">
                            </td>
                        </tr>
                    </table>

addPseudoClass () {
               let tds = this.$refs.tds
               this.style = document.createElement('style')
               tds.forEach((v, i) => {
                   let { width } = v.dataset
                   this.style.innerText += `.progress${i}:after{width: ${width}; background-color: ${this.colors[i]}}`
               })
               document.body.appendChild(this.style)
           }