element中el-container容器與div佈局區分詳解
阿新 • • 發佈：2020-05-14
用於佈局的容器元件，方便快速搭建頁面的基本結構：
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,children: [
{
id: 2,event: "大學城一期專案工程1樓土建工程",timeLine: 5,comment: "無"
},{
id: 3,event: "大學城一期專案工程1樓電氣工程",{
id: 4,event: "大學城一期專案工程1樓排水工程",timeLine: 75,{
id: 5,event: "大學城一期專案工程1樓採暖主體工程",timeLine: 25,comment: "無"
}
]
},{
id: 6,event: "大學城一期專案工程2樓",timeLine: 90,children: [
{
id: 7,event: "大學城一期專案工程2樓土建工程",{
id: 8,event: "大學城一期專案工程2樓電氣工程",{
id: 9,event: "大學城一期專案工程2樓排水工程",comment: "無"
},{
id: 10,event: "大學城一期專案工程2樓採暖主體工程",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佈局內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！