Element组件Cascader、DatePicker、Select修改局部样式，不影响全局的方式_el-cascader 样式

Element官网展示所有组件，都是白色主题，如果我们需要修改整个项目中主题颜色，只需要定义全局的Css就可以实现，但是，如果我们在某个页面更换主题颜色（如深色主题），这样如果从当前页面跳转到其它页面之后，会使其它页面主题风格都发生改变，所以我们既需要改变当前页面，又不影响其它页面的风格。

1.0 通过JavaScript加载某些样式

// 只在页面生成之前有效，如果页面二次创新，就会失效
beforeCreate() {
     document.querySelector('.el-main').setAttribute('style', 'background-color: #002a4b !important;');
},
destroyed() {
     document.querySelector('.el-main').setAttribute('style', 'background-color: #fff;');
}
1
2
3
4
5
6
7

如上，我们在页面加载前通过DOM加载一些样式，离开当前页面之后又还原，这样是可以实现，但是页面也不仅仅是一两个class选择器那么简单，所以可以采纳，但并不是好的办法，而且如果当前页面修改之后刷新，这个样式又会消失，所以还需要加入以下代码：

mounted(){
      // 防止页面刷新丢失
      document.querySelector('.el-main').setAttribute('style', 'background-color: #002a4b !important;');
      // 页面数据初始化调用方法
      ... 
},
1
2
3
4
5
6

2.0 通过组件提供的方法实现

  1.0 Cascader 级联选择器，DatePicker 日期选择器

  选项的容器并不在挂载的div#app中，而是div#app的兄弟元素，我们在组件中设置样式的时候，加上了scoped，作用域都是局限在div#app中，所以设置的样式就无法正常作用到选项内容的div上。
  但是我们查看组件属性，可以看到这么个东西，如下图：

  好，东西有了，但很多人和我一样也不知道咋样，没见过示例啊，下面就介绍怎么用，首先我们需要在在代码中添加下面这个属性。

<el-cascader style="margin-right: 12px"
     v-model="searchData.areaCode"
     :level="3" @οnchange="regionCodeChange"
     :checkStrictly="true" popperClass="area-choose"
     placeholder="请选择所在地区"
></el-cascader>
1
2
3
4
5
6

  这样我们自己定义的类选择器也就有了，然后我们只需要在当前页面进行修改就行，如下：

.area-choose{
        background-color: #002a4b !important;
        border: 1px solid #34cdf8;
        .el-cascader-menu{
            color: #34cdf8 !important;
        }
        .el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover {
            background: #2f6ac1 !important;
        }
        .el-radio__inner {
            border: 1px solid #FFFFFF;
        }
        .el-cascader-node.is-selectable.in-active-path {
            color: #34cdf8;
        }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

  2.0 Select 选择器

  Select下拉框也一样，选项的容器并不在挂载的div#app中，而是div#app的兄弟元素，我们在组件中设置样式的时候，加上了scoped，作用域都是局限在div#app中，所以设置的样式就无法正常作用到选项内容的div上。
  but我们查看组件属性，可以看到这么个东西，如下图：

  该值默认为true，就出现了添加到body元素，而我们在id="app"内部就不能全局修改，否则会影响其它页面样式，所以

<el-select style="margin-right: 12px;"
       @change="blockNameChange"
       :popper-append-to-body="false"
       v-model="searchData.blockName" clearable
       placeholder="请选择景区" size="mini">
       <el-option
               v-for="item in blockNameList"
               :key="item.blockName"
               :label="item.blockName"
               :value="item.blockName">
       </el-option>
</el-select>
1
2
3
4
5
6
7
8
9
10
11
12

  把该字段设置为false之后，如下：

  这样我们就可以在当前页面修改，而不会影响全局样式。