element中el-container容器与div布局区分详解
更新时间：2020年05月13日 11:39:31 作者：默默J
这篇文章主要介绍了element中el-container容器与div布局区分详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
用于布局的容器组件，方便快速搭建页面的基本结构：
el-container：外层容器。当子元素中包含 或 时，全部子元素会垂直上下排列，否则会水平左右排列。
el-header：顶栏容器。
el-aside：侧边栏容器。
el-main：主要区域容器。
el-footer：底栏容器。
以上组件采用了 flex 布局，elemen-ui官方文档链接：
http://element-cn.eleme.io/#/zh-CN/component/container
此外，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-row> <el-row class="margin-top-10 text-align-right"> <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>
<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,
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)
}
}
};
</script>
<style lang="less">
</style>
到此这篇关于element中el-container容器与div布局区分详解的文章就介绍到这了,更多相关element中el-container容器与div布局内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue轻量级框架无法获取到vue对象解决方法相关知识点，有需要的读者们跟着学习下。2019-05-05
这篇文章主要介绍了详解vue几种主动刷新的方法总结，文中详细的介绍了几种方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要介绍了Vue数据更新但页面没有更新的多种情况问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要为大家详细介绍了vue实现简单购物车案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要介绍了深度剖析Vue3在浏览器的运行原理，文章通过围绕主题展开相关详细介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
本篇文章主要介绍了Vue表单类的父子组件数据传递示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
下面小编就为大家分享一篇vue项目中引入noVNC远程桌面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了vue3组件通信方式,面试题经常会问到vue3组件间的通信方式，今天就通过实例代码给大家详细介绍下，对vue3组件通信相关知识感兴趣的朋友一起看看吧2022-08-08
这篇文章主要为大家详细介绍了Vue3中的计算属性和属性监听的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2023-08-08
这篇文章主要为大家详细介绍了Vue结合SignalR实现前后端实时消息同步，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
最新评论