（vue）使用样式属性scoped时要当心

        在做项目的时候，用到过pig框架（pig框架飞机票），该框架前端采用的是vue框架，代码绝大部分都是用代码生成器生成的，之前也一直没用过都是现学现卖。因此，总避免不了掉坑里，其中vue样式的scoped属性就是一个大坑。

         一下就是代码生成器生成的部分样式代码：

       页面部分代码：

     项目的要求就是要把生成的表格的表头添加一个背景颜色。我们从页面代码就可以看出，这代码里面根本就没有关于表格的代码，所以表格是由js文件动态生成的，那么，想要修改原生的元素样式，也不难。只要打开页面，审查元素查看表格表头的属性（包括：类名、id、name等等），然后添加样式就行。嗯，思路就是这样没错。于是我开始在这里面写样式代码。写好一看，傻眼了，表头内容没了。后面不管再如何折腾，表头都不出来，除非把里面的代码全删掉。于是，我把目光锁定在了这段样式代码里面。

     我发现了一个平常没见过的属性：scoped。经过查资料才发现这个属性是HTML5特有属性，作用就是圈定样式的作用范围。

知道问题所在就好解决了。于是我自己重新写了一个样式标签，全部样式如下：

问题随即得到解决。