专栏首页acoolgiser_zhuanlanvue element 控件之 el-container中的el-side 与 el-main 的间距怎么设置

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

效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 从零开始搭建 VUE + Element UI后台管理系统框架

    后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容。比如阿里云、七牛云、头条号、百家号等等,他们的管理系统都是这样的。

    Javanx
  • 【Vue.js】Vue.js组件库Element的基础用法

    Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,是帮助网站快速成型的工具。

    魏晓蕾
  • Vuex从入门到精通(三)

    开始 前言 这一节,我们将通过一个实战案例 : 动态展示从后台返回的新闻列表 允许用户根据来源, 和 内容&标题 中的关键字对新闻列表进行筛选 来加...

    lonelydawn
  • 动态加载router,用Vue+Element UI搭建后台管理系统界面

    今天教大家用 Vue + Element UI 搭建一个后台管理系统界面,首先讲一下需要用到的组件标签,重点是左侧菜单栏的创建,Element UI 左侧菜单的...

    南风
  • 教育平台项目前端:Vue.js 高级

    Vue cli 是基于 Vue 的应用开发提供的一个标准的脚手架工具,为应用搭建基础的框架结构,提供插件、开发服务、Preset、构建打包功能。

    RendaZhang
  • 【编程鹿】害 学element-ui 看这篇就够了

    目前可以通过 unpkg.com/element-ui 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用。

    鹿老师的Java笔记
  • vue源码解读(二)

    vue的核心思想是数据驱动。所谓数据驱动,就是指视图是由数据驱动生成的,想要对视图进行修改,不会直接操作DOM,而是通过修改数据。这样,我们在开发时候只需要关注...

    用户3258338
  • vuejs之结合使用vue+element-ui搭建后台管理页面

    进入到该项目目录,输入:npm install --save element-ui

    西西嘛呦
  • 使用Vue写个首页,原来这么简单

    作为一个偏后端管理项目,其实做不做公共首页都是可以的,毕竟有个 登录 以及登录后的 后台功能 页就可以了,这里做个公共首页 主要为了介绍下项目

    双鬼带单

扫码关注云+社区

领取腾讯云代金券