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"
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-
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="stEstimateEditor">
<el-input size="small" placeholder="请输⼊内容" v-model="stEstimate">          <i slot="suffix" class="el-input__icon el-icon-check pointer"
@click="stEstimateEditor = false"></i>
</el-input>
</template>
<template v-else>
<span class="pointer" @click="stEstimateEditor = true">
{{stEstimate||"-"}}
<i class="el-icon-edit" ></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="stProjectEditor">
<el-input size="small" placeholder="请输⼊内容" v-model="stProject">          <i slot="suffix" class="el-input__icon el-icon-check pointer"
@click="stProjectEditor = false"></i>
</el-input>
</template>
<template v-else>
<span class="pointer" @click="stProjectEditor = true">
{{stProject||"-"}}
<i class="el-icon-edit" ></i>
</span>
</template>
</template>
</el-table-column>
<el-table-column
prop="quantityIndex"
label="⼯程量指标单位"
header-align="center"
>
</el-table-column>
<el-table-column
div中的div居中prop="conversion"
label="转换系数"
class-name="editor-column"
header-align="center"
>
<template slot-scope="scope">
<template v-if="versionEditor">
<el-input size="small" placeholder="请输⼊内容" v-model="version">          <i slot="suffix" class="el-input__icon el-icon-check pointer"
@click="versionEditor = false"></i>
</el-input>
</template>
<template v-else>
<span class="pointer" @click="versionEditor = true">
{{version||"-"}}
<i class="el-icon-edit" ></i>
</span>
</template>
</template>
</el-table-column>
</el-table>
</div>
</template>
</el-col>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。