Vue+Elementui前端开发个人备忘（粗浅理解，不一定对，慎重参考）

1取消滚动条（保留滚动效果）

   ::-webkit-scrollbar {
     width: 0 !important;
   }
   ::-webkit-scrollbar {
     width: 0 !important;height: 0;
   }

2调整表格行高

:row-style="{height:'20px'}"
:cell-style="{padding:'0px'}"

3调整表头颜色，行高

:header-cell-style="{background:'#eef1f6',color:'#606266',padding:'0px'}"
:header-row-style="{height:'20px'}"

4强制刷新页面（监听到对某一组件的访问即刷新）
（不推荐）
在main.js中加入

router.beforeEach((to, from, next) => {
if(to.path=='/contentInclude'){
    window.location.reload();
  }
})

其他解决方法

5.当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0，设置height:100vh，该元素会被撑开屏幕高度一致。

6.Vue container布局撑满屏幕

7.清空表单

clearForm(){
      this.form.name=null;
      this.form.sex=null;
      this.form.cardNum=null;
      this.form.belongCompany=null;
      this.form.articleName=null;
      this.form.firstPlatform=null;
      this.form.time=null;
    },

8.添加背景图片并强制拉伸填满（不采用平铺的方式）

.login-container {
    height: 100%;
    weight:100%;
    position: absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background-repeat:no-repeat; 
    background-attachment:fixed;
    background-image: url('../assets/img_bg.png');
    background-size:cover;
    
}

9.Vue + Spring Boot 项目实战（精品）

10.改变Element-ui二级菜单的激活背景颜色

  .el-menu-item.is-active {
    background-color: rgba(24,144,255,1) !important;
  }

11.改变Element-ui二级菜单的背景颜色（先定义类再覆盖）

<el-menu-item index="/contentInclude" class="second-menu-item">
XXX</el-menu-item>

.second-menu-item{
  background:#444444 !important;
}

12.更改el-upload上传框的背景颜色与添加描述
不要使用drag属性（否则会默认有一片空白），使用v-if与v-else，否则返回的缩略图无法覆盖整个上传框

<el-upload
              class="Upload-picture-container"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              >
              
              <img v-if="imageUrl_TortEvidence" :src="imageUrl_TortEvidence" class="Upload-picture">
              <i v-else class="el-icon-circle-plus addButton" style="margin-top:15%;"></i>
              <div class="el-upload__text" >屏幕快照<br/><br/>
              <span style="color:#909399">仅限JPG、GIF、PNG格式图片，单个文件最大不超过2MB</span>
              </div>
            </el-upload>

el-upload css设置

.Upload-picture-container .el-upload{
  width:348px;
  height:196px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background:#FAF9F9;
}

.Upload-picture-container .el-upload:hover {
  border-color: #409EFF;
}
.Upload-picture {
  width: 100%;
  height: 100%;
  display: block;
}

13.vue在登录界面隐藏侧栏，顶栏与底部
示例，在需要隐藏的组件中加入v-if="$route.meta.keepAlive

<el-aside style="width:15%"v-if="$route.meta.keepAlive">

index.js中加入

  meta: {
    keepAlive: false
  }

{
      path: '/',
      name: 'Login',
      component: Login,
      meta: {
        keepAlive: false
      }
    }

14.文字居中
水平居中

style="text-align: center;"

垂直居中 （number）为容器高度

line-height:（number）px

15.vue的样式污染问题解决办法（style加scoped）

<style scoped>
</style>

或者采用加class，避免不同组件命名重复（污染原因）

16.设置组件背景透明

background-color:rgba(0,0,0,0~1)

17.elementui栅格布局内部想改变组件对齐方式

<el-row style="margin-top:5px;margin-bottom:10px;">
	<el-col :span="9">
    	<div >
        	<span style="float:left;line-height:36px;">名单类型：</span>
       	</div>
   	</el-col>
  	<el-col :span="15">
   	</el-col>
</el-row>

18.让表单居中（需要在表单外嵌套一个div）