1. 更改框架内置样式(element ui)

① 全局css中修改

  这里分为两种,可以写在全局第三方样式文件element-ui.scss中,然后再

//项目样式入口文件index.scss中
@import './element-ui.scss';

//同时在main.js中
import 'element-ui/lib/theme-chalk/index.css'

//即可自定义框架样式

  另一种方法,则是在局部vue中覆盖,同样也是全局生效,如果是要全局修改还是统一写在全局style中比较好,出现奇怪问题时更容易找到问题所在,示例如下:

<style lang="scss">
.el-table .cell {
    white-space: pre-line;
  }
  .el-table {
    .el-table__header {
      tr {
        th {
          border-left: 1px solid #0cc !important;
          border-right: 0 !important;
          &:last-child {
            border-left: 0 !important;
          }
        }
      }
    }
  }
}  
</style>
② 局部vue中修改

  与全局覆盖区分,局部修改的方法参考第4点内容,要使它生效又不污染其他地方同样的组件的话,需采用 >>> /deep/在框架组件的class名前方。


2. 自适应屏幕(@media标签)

  一般这种适应不止宽高,还有间距,大小等一些复杂的样式,这时候需要采用@media标签来监测屏幕宽度从而筛选不同的样式进行适配。举例如下:

@media screen and (max-width: 1000px) {
  .navbar {
    .menu-wrap {
      margin-left: -50px !important;
      font-size: 14px !important;
    }
  }
}

@media screen and (max-width: 380px) {
  .navbar {
    .menu-wrap {
      margin-left: -20px !important;
      font-size: 12px !important;
    }
  }
}

//min-width要从小到大从上到下写
//max-width要从大到小从上到下写
//这么做只是为了方便维护

3. !important样式覆盖

  关于!important这个标识,要慎用,因为优先级是最高的。比行内style的属性还要高,所以用一般方式覆盖不掉的话,才考虑用!important。
   如果要!important覆盖掉样式,然后又需要在嵌套里面修改的话,同样也需要带上!important,否则不会生效的。举例如下:

.el-table {
     height: calc(100vh - 300px) !important;
}

.el-table__body-wrapper {
    height: calc(100vh - 263px) !important;
}
//这里是更改el-table的高以及body里面数据的高,定死后
// el-table的max-height属性失效
//

4. >>> 与 /deep/

  在我们使用vue编写页面的时候,如果有引用第三方组件,又想改它内置的样式且只影响当前页,最好的方法就是采用>>>,有些如果无法解析>>>,可考虑加/deep/修饰符进行穿透,实例如下:

//这种情况相对于第一种是只影响当前页
<style lang="scss" scoped>    //不起作用时,考虑/deep/替代>>>位置
  >>>.el-table{
      padding: 5px;
   .el-table__header {
          background-color: rgba(0,33,91,0.5);
      }
  }
 //这里如果没有>>>,即使是在上一层套个div,自命名class也不会起作用
</style>

<style lang="scss">
  .el-table {
      padding: 5px;
   .el-table__header {
          background-color: rgba(0,33,91,0.5);
      }
  }
  //这种写法的话跟在全局文件写一样效果,会造成污染其他地方的样式
</style>

5. el-textarea设置min-height:100%不生效

  引入第三方ui组件,如el-input后,要做自适应的文本域,但是一开始即使文本内容很少也要铺满区域时,需要设置高度,这里通过更改内置样式的min-height达到该目的,示例如下:

<template>
    <div class="text">
        <el-input type="textarea"
              placeholder="请输入内容"
              v-model="textarea1"
              autoresize>
      </el-input>
    </div>
</template>

<style scoped lang="scss">
     .text {
          display: flex;    //要在textarea套上一层标签,设置为弹性盒子布局即可达到目的
      }

      >>>. el-textarea {
              .el-textarea__inner {
                  min-height: 100% !important;
               }
      }
</style>

6. 自适应宽高

  如果只是简单的需要自适应宽高而不用改其他样式的话,可以采取js控制或者是css里的calc属性来进行调整。

js
<template>
    <div>
        <el-table :data="datalist" :border="false" :max-height="tableHeight">
               <el-table-column prop="name" label="名字" align="center"></el-table-column>
              <el-table-column prop="address" label="地址" align="center"></el-table-column>
              <el-table-column label="操作">
                  <template slot-scope="{row}">
                    <el-button type="primary" @click="edit(row)">修改</el-button>
                    <el-button type="danger" @click="del(row)">删除</el-button>
                  </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
      data(){
          return {
              tableHeight: 400
              //省略balabala变量
          }
      },
      methods: {
          edit(row){
              //执行修改逻辑
          },

          del(row){
              //执行删除逻辑
          }
      },
      mounted(){
          this.tableHeight = window.innerWidth >= 1600 ? 400 : 100
          window.onresize = ()=>{
              this.tableHeight = window.innerWidth >= 1600 ? 400 : 100
          }
      }
      }
</script>
css

  css部分可参考第3点的例子,但这个在一些组件上会有比较难把握的问题,如table,或者树形数据这些,使用calc的方法来定高的话会造成数据过少时,下方出现空白(不够撑开),像这些的话推荐还是用js来控制好一些。
  如果是采用calc来设置的话,最好是采用vw,vh单位来计算,%可能不起作用。