element中el-container容器與div布局區(qū)分詳解

更新時間：2020年05月13日 11:39:31 作者：默默J

這篇文章主要介紹了element中el-container容器與div布局區(qū)分詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

用于布局的容器組件，方便快速搭建頁面的基本結構：

el-container：外層容器。當子元素中包含或時，全部子元素會垂直上下排列，否則會水平左右排列。

el-header：頂欄容器。

el-aside：側邊欄容器。

el-main：主要區(qū)域容器。

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>

出現(xiàn)的頁面是：

這個紅色的部分，我放在了el-row里面，應該會出現(xiàn)在最后一行位置，但是他出現(xiàn)在第一行的并存位置，仔細查看代碼，一切正常。

瀏覽器也已經(jīng)識別

CSS樣式?jīng)]有沖突的地方。

三、解決方案

修改代碼el-container布局為div

頁面布局就是想要的結果：

四、分析原因

1、el-container 的子元素只能是后四者，后四者的父元素也只能是 el-container

我錯誤出現(xiàn)的原因在于，我在el-container 布局容器里面放入了el-row,雖然瀏覽器已經(jīng)識別那是一個行組件，但是沒有把他真正的作用體現(xiàn)出來。

2、div中一般是el-row和rl-col

div中的el-row和rl-col就和普通HTML中的表格行與列相似。

3、el-container一般用于整個頁面的大布局，div常用于部分區(qū)域的小布局

div一般是；

el-container一般是：

希望大家以后別犯我這樣子的錯誤哈

五、本頁面的源碼

本頁面的數(shù)據(jù)是mock模擬生成的，后期的稅局庫數(shù)據(jù)是通過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="轉換系數(shù)"
        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: {
   // 獲取列表數(shù)據(jù)
   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布局區(qū)分詳解的文章就介紹到這了,更多相關element中el-container容器與div布局內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: