element中el-container容器与div布局区分详解

element中el-container容器与div布局区分详解
⽤于布局的容器组件，⽅便快速搭建页⾯的基本结构：
el-container：外层容器。

当⼦元素中包含或时，全部⼦元素会垂直上下排列，否则会⽔平左右排列。

el-header：顶栏容器。

el-aside：侧边栏容器。

el-main：主要区域容器。

el-footer：底栏容器。

此外，el-container 的⼦元素只能是后四者，后四者的⽗元素也只能是 el-container。

【这句话请注意】
⼀般这种装箱容器在使⽤element-ui编写页⾯的时候⾮常常见，⽐ div 更好⽤⼀点，但是这次我在使⽤的时候，他⾮常的“不听话”⼀、我的需求
这是⼀个弹出框，基本的页⾯布局是：
上⾯的⼀⾏为弹出框的title显⽰
中间部分是主要展⽰内容
最下⾯是基本操作按钮
⼆、提出问题
我最开始的布局代码是：
部分不能说明问题的代码没有写出来
<template>
<el-container class="subject-match height-inherit" id="subject-match">
<el-row :gutter="50">
<el-col :span="5">
</el-col>
<el-col :span="19">
</el-col>
<el-button type="primary" @click="closeDialog()">确定</el-button>
<el-button @click="closeDialog()">取消</el-button>
</el-row>
</el-container>
</template>
出现的页⾯是：
这个红⾊的部分，我放在了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中获取的<template>
<div class="subject-match height-inherit" id="subject-match">
<el-row :gutter="50">
<el-col :span="7">
<el-table
:data="data"
style="width: 100%"
row-key="id"
border
size="small">
<el-table-column
prop="event"
label="项⽬结构">
</el-table-column>
<!--<el-table-column-->
<!--prop="comment"-->
<!--label="comment">-->
<!--</el-table-column>-->
</el-table>
</el-col>
<el-col :span="17">
<div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="分部分项指标" name="first"></el-tab-pane>
</el-tabs>
</div>
<template v-if="activeName === 'first'">
<div>
<el-checkbox>只显⽰未设置指标项</el-checkbox>
</div>
<div class="margin-top-10">
<el-table
:data="tableData"
border
:max-height="maxHeight"
v-loading="loading"
:header-cell-style="{background:'#eef1f6',color:'#606266'}"
size="small">
<el-table-column
type="index"
align="center"
class-name="index"
label="序号"
width="50">
</el-table-column>
<el-table-column
prop="code"
header-align="center"
label="编码">
</el-table-column>
<el-table-column
prop="name"
label="名称"
align="center">
</el-table-column>
<el-table-column
prop="unit"
label="单位"
align="center">
</el-table-column>
<el-table-column
prop="quentity"
label="⼯程量"
header-align="center"
</el-table-column>
<el-table-column
prop="unitPrice"
label="综合单价"
align="center">
</el-table-column>
<el-table-column
prop="combinedPrice"
label="综合合价"
header-align="center"
>
</el-table-column>
<el-table-column
prop="costEstimate"
label="概算费⽤科⽬"
class-name="editor-column"
header-align="center"
>
<template slot-scope="scope">
<template v-if="scope.row.costEstimateEditor">
<el-input size="small" placeholder="请输⼊内容" v-model="scope.row.costEstimate"> <i slot="suffix" class="el-input__icon el-icon-check pointer"
@click="scope.row.costEstimateEditor = false"></i>
</el-input>
</template>
<template v-else>
<span class="pointer" @click="scope.row.costEstimateEditor = true">
{{scope.row.costEstimate||"-"}}
<i class="el-icon-edit" style="display: none;"></i>
</span>
</template>
</template>
</el-table-column>
<el-table-column
prop="costProject"
label="概算⼯程量科⽬"
class-name="editor-column"
header-align="center"
>
<template slot-scope="scope">
<template v-if="scope.row.costProjectEditor">
<el-input size="small" placeholder="请输⼊内容" v-model="scope.row.costProject"> <i slot="suffix" class="el-input__icon el-icon-check pointer"
@click="scope.row.costProjectEditor = false"></i>
</el-input>
</template>
<template v-else>
<span class="pointer" @click="scope.row.costProjectEditor = true">
{{scope.row.costProject||"-"}}
<i class="el-icon-edit" style="display: none;"></i>
</span>
</template>
</template>
</el-table-column>
<el-table-column
prop="quantityIndex"
label="⼯程量指标单位"
header-align="center"
>
</el-table-column>
<el-table-column
prop="conversion"
label="转换系数"
class-name="editor-column"
header-align="center"
>
<template slot-scope="scope">
<template v-if="scope.row.conversionEditor">
<el-input size="small" placeholder="请输⼊内容" v-model="scope.row.conversion"> <i slot="suffix" class="el-input__icon el-icon-check pointer"
@click="scope.row.conversionEditor = false"></i>
</el-input>
</template>
<template v-else>
<span class="pointer" @click="scope.row.conversionEditor = true">
{{scope.row.conversion||"-"}}
<i class="el-icon-edit" style="display: none;"></i>
</span>
</template>
</template>
</el-table-column>
</el-table>
</div>
</template>
</el-col>
<el-row class="margin-top-10 text-align-right">
<el-button type="primary" @click="handleCommit()">应⽤修改</el-button> <el-button @click="closeDialog()">取消</el-button>
</el-row>
</div>
</template>
<script>
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,
}
]
}
]
}
],
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)
}
}
};
</script>
<style lang="less">
</style>
到此这篇关于element中el-container容器与div布局区分详解的⽂章就介绍到这了,更多相关element中el-container容器与div布局内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！。