element布局容器大小_element中el-container容器与div布局区分详解
用于布局的容器组件,方便快速搭建页面的基本结构:
el-container:外层容器。当子元素中包含 或 时,全部子元素会垂直上下排列,否则会水平左右排列。
el-header:顶栏容器。
el-aside:侧边栏容器。
el-main:主要区域容器。
el-footer:底栏容器。
此外,el-container 的子元素只能是后四者,后四者的父元素也只能是 el-container。【这句话请注意】
一般这种装箱容器在使用element-ui编写页面的时候非常常见,比 div 更好用一点,但是这次我在使用的时候,他非常的“不听话”
一、我的需求
这是一个弹出框,基本的页面布局是:
上面的一行为弹出框的title显示
中间部分是主要展示内容
最下面是基本操作按钮
二、提出问题
我最开始的布局代码是:
部分不能说明问题的代码没有写出来
确 定
取 消
出现的页面是:
这个红色的部分,我放在了el-row里面,应该会出现在最后一行位置,但是他出现在第一行的并存位置,仔细查看代码,一切正常。
浏览器也已经识别
CSS样式没有冲突的地方。
三、解决方案
修改代码el-container布局为div
页面布局就是想要的结果:
四、分析原因
1、el-container 的子元素只能是后四者,后四者的父元素也只能是 el-container
我错误出现的原因在于,我在el-container 布局容器里面放入了el-row,虽然浏览器已经识别那是一个行组件,但是没有把他真正的作用体现出来。
2、div中一般是el-row和rl-col
div中的el-row和rl-col就和普通HTML中的表格行与列相似。
3、el-container一般用于整个页面的大布局,div常用于部分区域的小布局
div一般是;
el-container一般是:
希望大家以后别犯我这样子的错误哈
五、本页面的源码
本页面的数据是mock模拟生成的,后期的税局库数据是通过url在service中获取的
:data="data"
style="width: 100%"
row-key="id"
border
size="small">
prop="event"
label="项目结构">
只显示未设置指标项
:data="tableData"
border
:max-height="maxHeight"
v-loading="loading"
:header-cell-style="{background:'#eef1f6',color:'#606266'}"
size="small">
type="index"
align="center"
class-name="index"
label="序号"
width="50">
prop="code"
header-align="center"
label="编码">
prop="name"
label="名称"
align="center">
prop="unit"
label="单位"
align="center">
prop="quentity"
label="工程量"
header-align="center"
>
prop="unitPrice"
label="综合单价"
align="center">
prop="combinedPrice"
label="综合合价"
header-align="center"
>
prop="costEstimate"
label="概算费用科目"
class-name="editor-column"
header-align="center"
>
@click="scope.row.costEstimateEditor = false">
{{scope.row.costEstimate||"-"}}
prop="costProject"
label="概算工程量科目"
class-name="editor-column"
header-align="center"
>
@click="scope.row.costProjectEditor = false">
{{scope.row.costProject||"-"}}
prop="quantityIndex"
label="工程量指标单位"
header-align="center"
>
prop="conversion"
label="转换系数"
class-name="editor-column"
header-align="center"
>
@click="scope.row.conversionEditor = false">
{{scope.row.conversion||"-"}}
应用修改
取 消
import {subjectMatch} from 'service/budget/adjust';
export default {
name: 'subject-match',
data() {
return {
activeName: 'first',
loading: false,
maxHeight: 500,
tableData: [],
data: [
{
id: 0,
event: "大学城一期项目",
timeLine: 50,
comment: "无",
children: [
{
id: 1,
event: "大学城一期项目工程1楼",
timeLine: 10,
comment: "无",
children: [
{
id: 2,
event: "大学城一期项目工程1楼土建工程",
timeLine: 5,
comment: "无"
},
{
id: 3,
event: "大学城一期项目工程1楼电气工程",
timeLine: 10,
comment: "无"
},
{
id: 4,
event: "大学城一期项目工程1楼排水工程",
timeLine: 75,
comment: "无"
},
{
id: 5,
event: "大学城一期项目工程1楼采暖主体工程",
timeLine: 25,
comment: "无"
}
]
},
{
id: 6,
event: "大学城一期项目工程2楼",
timeLine: 90,
comment: "无",
children: [
{
id: 7,
event: "大学城一期项目工程2楼土建工程",
timeLine: 5,
comment: "无"
},
{
id: 8,
event: "大学城一期项目工程2楼电气工程",
timeLine: 10,
comment: "无"
},
{
id: 9,
event: "大学城一期项目工程2楼排水工程",
timeLine: 75,
comment: "无"
},
{
id: 10,
event: "大学城一期项目工程2楼采暖主体工程",
timeLine: 25,
comment: "无"
}
]
}
]
}
],
columns: [
{
text: "事件",
value: "event",
width: 200
},
{
text: "ID",
value: "id"
}
],
defaultProps: {
children: 'children',
label: 'label',
id: 'id',
level: 'level'
}
};
},
mounted() {
this.getList();
},
methods: {
// 获取列表数据
getList() {
this.loading = true;
subjectMatch().then(res => {
this.loading = false;
this.tableData = res.data;
});
},
// 确定操作
handleCommit() {
this.closeDialog(true);
},
// 关闭弹窗
closeDialog(refresh = false) {
this.$emit('hideDialog', refresh);
},
handleClick(event){
console.log(event)
}
}
};
到此这篇关于element中el-container容器与div布局区分详解的文章就介绍到这了,更多相关element中el-container容器与div布局内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
element布局容器大小_element中el-container容器与div布局区分详解相关推荐
- android fragment加载布局的方式,Android中Fragment的加载方式与数据通信详解
Android中Fragment的加载方式与数据通信详解 发布时间:2020-08-22 18:55:57 来源:脚本之家 阅读:155 作者:Joah 一.加载方式 1. 静态加载 1.1 加载步骤 ...
- ssis for循环容器_SSIS包中的序列容器
ssis for循环容器 This article explores the Sequence container in SSIS package with examples. 本文通过示例探索了SS ...
- python数组相减_对Python 中矩阵或者数组相减的法则详解
对Python 中矩阵或者数组相减的法则详解 最近在做编程练习,发现有些结果的值与答案相差较大,通过分析比较得出结论,大概过程如下: 定义了一个计算损失的函数: def error(yhat,labe ...
- android启动页使用gif,android中使用react-native设置应用启动页过程详解
一.背景 在我们使用react-native进行编写代码的时候,当启动应用的时候,我们会看到如下界面 然而,这样的启动界面是非常的不又好,那么我们该怎么进行处理启动界面呢?有如下两种方案 二.方案 1 ...
- java中属性文件读取案例_java相关:Spring中属性文件properties的读取与使用详解
java相关:Spring中属性文件properties的读取与使用详解 发布于 2020-6-3| 复制链接 摘记: Spring中属性文件properties的读取与使用详解实际项目中,通常将一些 ...
- Java中print、printf、println的区别 详解
Java中print.printf.println的区别详解 printf主要是继承了C语言的printf的一些特性,可以进行格式化输出 print就是一般的标准输出,但是不换行 println和pr ...
- ASP中利用OWC控件实现图表功能详解[zz]
ASP中利用OWC控件实现图表功能详解 在ASP中利用OWC(Office Web Components)控件可轻松实现各种图表功能,如饼图,簇状柱型图,折线图等. 在下面的代码中我详细的给出了饼图, ...
- linux中cat、more、less命令区别详解
linux中cat.more.less命令区别详解 转自:https://blog.csdn.net/xyw_blog/article/details/16861681 众所周知linux中命令cat ...
- ASP中利用OWC控件实现图表功能详解
在ASP中利用OWC(Office Web Components)控件可轻松实现各种图表功能,如饼图,簇状柱型图,折线图等. 在下面的代码中我详细的给出了饼图,簇状柱型图,折线图的使用方法.OWC的更 ...
最新文章
- java a运算顺序_Java中计算顺序的规则是什么?
- 腾讯云TDSQL数据库核心技术理论取得进展 ,同时发布数据异常检测工具
- listview 滑动更改标题
- 重磅 | 阿里开源首个 Serverless 开发者平台 Serverless Devs
- Struts2-Action的基本流程
- Pensando Distributed Services Architecture [Pensando 分布式服务架构] - 翻译
- python pexpect输出_关于多线程:如何使用pexpect获取python中子进程的自发输出
- JS实现一个简单的计算器
- 15.立体几何——介绍,为什么多个视图,深度和形状线索 测验,人类如何在3D中看到东西_1
- 再见,你已经不再是程序员了
- Oracle SQL 优化原则(实用篇)
- java 盘符 系统_JAVA小白预备内容
- centos6.5 redis3 开机自动启动命令设置
- python与txt文件查找,在Python中搜索TXT文件
- CH24C 逃不掉的路
- Qt + GDAL 写入矢量图层 shp
- 赛门铁克NBU备份oracle慢的问题
- 免费下载IEEE、SCI论文的网站
- 将谷歌浏览器设置为黑色主题背景 超酷炫黑
- 自己制作深度学习数据集教程
热门文章
- USB Map 解决 AX200 蓝牙不出现的问题-黑苹果 Big Sur 11.5.2-TUF B550M PLUS WI-FI
- Android 12.0 开机动画支持mp4格式视频播放
- hadoop读写mysql数据库
- Acid-Reloaded
- centos8安装Nginx时报错 nginx.service: Unit cannot be reloaded becau lines 1-5
- php 分页 limit
- python深度遍历
- 什么是配煤?为什么要配煤?
- Python GUI项目:古诗词鉴赏系统
- 自考计算机科学与技术本科毕业论文选题,自考本科毕业论文探究.doc