element-plus布局排版问题总结（更新ing）

el-container空隙

• 源码-更改了容器的显示，占满屏幕

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-row class="el-row1">
          <el-col :span="12">
            <div class="grid-content ep-bg-purple">
              <span style="color: white">当前用户span>
            div>

            <div>
              <span style="color: white">新闻系统span>
            div>
          el-col>

          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-button @click="$router.push('/')">聊天室el-button>
              <el-button @click="$router.push('/toybox/game')">猜数字游戏el-button>
            div>
          el-col>
        el-row>
      el-header>

      <el-main>
        <RouterView>RouterView>
      el-main>

      <el-footer>
      el-footer>
    el-container>
  div>
template>

<style scoped>

.el-row1 {
  background-color: black;
  display: flex;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}


.common-layout {
  display: flex;
  justify-content: flex-start;
  background-color: #2c3e50;
  width: 100vw;
  height: 100vh;
}
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

修改app组件

在app组件中改一下#app的css

<style>
html,body,#app{
  height:100%;
  margin: 0;
  padding: 0;
  /*overflow-x: hidden;*/
}
style>
1
2
3
4
5
6
7
8

el-header容器空隙

检查前端

手动测试修改下

修改el-header

/*解决el-header左右占不满的问题*/
.el-header{
  padding: 0;
}
1
2
3
4

• 虽然是灰色，但是实际上是应用成功的
  

el-container

这个common-layout很容易影响布局，导致我们后续自设的css不起作用，建议删除