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

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

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

<style lang="scss" scoped>
</style>

页面部分代码：

<template>
  <div class="app-container pull-auto">
    <el-button type="primary" @click="handleAdd" size="small" v-if="permissions.sys_route_add">新 增</el-button>
    <el-button type="success" @click="handleApply" size="small" v-if="permissions.sys_route_add">同 步</el-button>
    <br/><br/>
    <avue-crud ref="crud" :page="page" :data="tableData" :table-loading="tableLoading" :option="tableOption"
               @current-change="currentChange" @size-change="sizeChange" @row-update="handleUpdate"
               @row-save="handleSave" @row-del="rowDel">
      <template slot-scope="scope" slot="menu">
        <el-button type="primary" v-if="permissions.sys_route_upd" icon="el-icon-check" size="small" plain
                   @click="handleEdit(scope.row,scope.index)">编辑
        </el-button>
        <el-button type="danger" v-if="permissions.sys_route_del" icon="el-icon-delete" size="small" plain
                   @click="handleDel(scope.row,scope.index)">删除
        </el-button>
      </template>
    </avue-crud>
  </div>
</template>

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

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

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

<style lang="scss">
  .crud-container .el-table__header th {
    color: white !important;
    background: #3ca1f9 !important;
  }
</style>

问题随即得到解决。

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

猜你喜欢