vue element 控件之 el-container中的el-side 与 el-main 的间距怎么设置

acoolgiser

发布于 2020-05-27 10:23:10

3.9K0

发布于 2020-05-27 10:23:10

文章被收录于专栏：acoolgiser_zhuanlan

vue element 控件之 el-container中的el-side 与 el-main 的间距怎么设置

效果：

如图所示，当我们在页面中同时使用el-container中的el-side 与 el-main组件时，默认情况下两个组件是挨在一起的。

查询官方文档，如图所示，el-side 与 el-main之间默认是无间距的。没有相关的属性可以设置布局。

现在想要的效果是两部分的中间有一定的间距。

因此可以通过设置CSS的方法，给el-main组件设置如下样式：

.main {
  margin-left: 50px;
}

举例：

代码：

<template>
  <el-container>
    <el-aside width="500px">
      aside部分
      <el-table :data="tableData" border stripe style="width: 100%">
        <el-table-column label="序号" width="150" prop="id"></el-table-column>
        <el-table-column label="文件名称" width="200" prop="name"></el-table-column>
        <el-table-column label="数量" width="150" prop="number"></el-table-column>
      </el-table>
    </el-aside>
    <el-main width="main" class="main">
      main部分
      <el-table :data="tableData" border stripe style="width: 100%">
        <el-table-column label="序号" width="150" prop="id"></el-table-column>
        <el-table-column label="文件名称" width="150" prop="name"></el-table-column>
        <el-table-column label="数量" width="150" prop="number"></el-table-column>
      </el-table>
    </el-main>
  </el-container> 
</template>

data：

tableData:[{
          id: '序号2',
          name: '龙须面',
          number:"50"
        }, {
          id: '序号5',
          name: '北京烤鸭',
          number:"60"
        }]

效果：