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，或者直接扫描

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

treeview控件怎么使用修改发育树_树形控件在生产力工具中的设计
惊!半年实践血泪史,3000 字深度好文,一个爱树的设计师手把手教你如何设计「树」! 树形控件是种常见的设计模式,几乎与图形化用户界面同时诞生,通过结构化的组织方式逐级展示内容,让整体信息架构一目了 ...
activex 控件的id 定义位置+使用ocx控件的客户端程序中对控件定义的文件中控件id定义的位置...
activex 控件的id 定义位置 // SuperDisplayCtl.cpp IMPLEMENT_OLECREATE_EX(CSuperDisplayCtrl, "SuperDispl ...
vue单位文本控件与vue加密文本控件
vue单位文本控件: 使用方式: npm install dami-text-input --save使用:<text-input v-model="test" :unit= ...
ElementUI+VUE 日期控件禁用用法
今天给大家整理一下ElementUI+VUE 日期控件禁用用法,希望对大家有所帮助! HTML文件 <el-date-pickerv-model="value"type=&q ...
媒体播放控件导入到窗体中 winform 0131
媒体播放控件导入到窗体中 winform 0131 找到控件把它弄到窗体中初始形态样式查看样式右击控件,属性各种样式的展现
楚琳Web打印控件可以在MVC中调用嘛？
楚琳Web打印控件可以在MVC中调用嘛?我在MVC中使用这个报表控件的时候,在Controller中可以查询到数据,但是显示到页面上的时候就会弹出这个提示,有遇到过这个问题的大神嘛,求帮助,急急急急 ...
autojs遍历当前页面所有控件_树形控件在生产力工具中的设计
惊!半年实践血泪史,3000 字深度好文,一个爱树的设计师手把手教你如何设计「树」! 树形控件是种常见的设计模式,几乎与图形化用户界面同时诞生,通过结构化的组织方式逐级展示内容,让整体信息架构一目了 ...
Winform实现在DataGridView控件的单元格中添加多个控件
Winform实现在DataGridView控件的单元格中添加多个控件背景实现思路关键代码完整代码下载背景 DataGridView控件的列是支持TextBoxColumn.ComboBox ...
html如何滚动闪烁,ActiveX flicker ,ActiveX控件闪烁,在html中,只要有滚动条,一滚动就闪烁...
Q: 一个画图的ActiveX,但是只要一有滚动条,ActiveX控件里面就闪烁,怎么去掉这个闪烁(Web 开发 JavaScript )ActiveX flicker ,ActiveX控件闪烁,在h ...

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

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

效果：

举例：

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

最新文章

热门文章