vue中用v-html根据后端返回结果设置样式

一、问题

1=====》今日遇到一个需求，是一个表格列返回状态status，并拥有多种不同颜色。

2=====》平日里见到的基本都是返回01234......前端用插槽放进去，根据数字去判断显示字段以及设置不同样式，今天看到的是后端直接返回一个字符串，像这样：

3=====》因此这一次我们不再需要根据字段去判断，而是直接写样式就行。

=====》于是乎，我用了v-html把它放了进去，并直接在style下面写class相应的样式。

//当后端给你返回一个包含富文本的内容时，你应该使用v-html来进行加载
<template slot="status" slot-scope="scrop">
    <span v-html="scrop.row.status"></span>
</template>

之后，从页面元素中看长这样：

但是不管我怎么修改，只有.label的样式能够有效果，而后面的label-xxx完全没反应。

虽然但是......问题还是得解决

二、解决

查找了相关文档发现，是因为我在<style lang="scss" scoped>中加了“scoped”，导致样式没效果！！！去掉scoped，即写成<style lang="scss">就解决了问题。

问题根源：因为通过scoped属性，可以使得组件之间的样式不互相污染，如果增加scoped上去之后，就没有办法再进行css样式的增加了。

↓

但这样简单粗暴地去掉scoped会导致css样式污染，从而出现其它问题，所以此方案并不可取。

↓

更好的方案：定义两个<style>标签，一个含有scoped属性，一个不含有scoped属性
这样可以避免css样式污染，同时也可以为加载的富文本内容增加样式like this：

这样，就可以在不改变原来样式的基础上，在需要的地方添加一个不含有scoped的属性！解决了问题。

但......我也从其它文章中看到了

更高级的解决方案：【使用样式穿透>>>，/deep/，::v-deep来实现样式的添加】

理由是：因为scoped属性的原因，每个dom都会被带上data-随机id，所以使用样式穿透来实现深层次的样式添加

只是我抄了作业后发现好像没效果，因为还不熟悉用法，这需要在后面的学习中去搞明白。