vue element 控件之 el-container中的el-side 與 el-main 的間距怎麼設置

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"
        }]

效果：

有問題歡迎來微信找我！一起學習成長，交個朋友！^_^

微信搜索：acoolgiser，或者直接掃描