欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2020年05月13日 11:39:31   作者：默默J  
這篇文章主要介紹了element中el-container容器與div布局區(qū)分詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

用于布局的容器組件，方便快速搭建頁面的基本結(jié)構(gòu)：

el-container：外層容器。當(dāng)子元素中包含 或 時(shí)，全部子元素會(huì)垂直上下排列，否則會(huì)水平左右排列。

el-header：頂欄容器。

el-aside：側(cè)邊欄容器。

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

el-footer：底欄容器。

以上組件采用了 flex 布局，elemen-ui官方文檔鏈接：
http://element-cn.eleme.io/#/zh-CN/component/container

此外，el-container 的子元素只能是后四者，后四者的父元素也只能是 el-container。【這句話請(qǐng)注意】

一般這種裝箱容器在使用element-ui編寫頁面的時(shí)候非常常見，比 div 更好用一點(diǎn)，但是這次我在使用的時(shí)候，他非常的“不聽話”

一、我的需求

這是一個(gè)彈出框，基本的頁面布局是：

上面的一行為彈出框的title顯示
中間部分是主要展示內(nèi)容
最下面是基本操作按鈕

二、提出問題

我最開始的布局代碼是：

部分不能說明問題的代碼沒有寫出來

<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)的頁面是：

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

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


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

三、解決方案

修改代碼el-container布局為div


頁面布局就是想要的結(jié)果：

四、分析原因

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

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

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

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

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

div一般是；

el-container一般是：


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

五、本頁面的源碼

本頁面的數(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="項(xiàng)目結(jié)構(gòu)">
     </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="分部分項(xiàng)指標(biāo)" name="first"></el-tab-pane>
     </el-tabs>
    </div>
    <template v-if="activeName === 'first'">
     <div>
      <el-checkbox>只顯示未設(shè)置指標(biāo)項(xiàng)</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="序號(hào)"
        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="綜合單價(jià)"
        align="center">
       </el-table-column>
       <el-table-column
        prop="combinedPrice"
        label="綜合合價(jià)"
        header-align="center"
       >
       </el-table-column>
       <el-table-column
        prop="costEstimate"
        label="概算費(fèi)用科目"
        class-name="editor-column"
        header-align="center"
       >
        <template slot-scope="scope">
         <template v-if="scope.row.costEstimateEditor">
          <el-input size="small" placeholder="請(qǐng)輸入內(nèi)容" 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="請(qǐng)輸入內(nèi)容" 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="工程量指標(biāo)單位"
        header-align="center"
       >
       </el-table-column>
       <el-table-column
        prop="conversion"
        label="轉(zhuǎn)換系數(shù)"
        class-name="editor-column"
        header-align="center"
       >
        <template slot-scope="scope">
         <template v-if="scope.row.conversionEditor">
          <el-input size="small" placeholder="請(qǐng)輸入內(nèi)容" 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()">應(yīng)用修改</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: "大學(xué)城一期項(xiàng)目",
      timeLine: 50,
      comment: "無",
      children: [
       {
        id: 1,
        event: "大學(xué)城一期項(xiàng)目工程1樓",
        timeLine: 10,
        comment: "無",
        children: [
         {
          id: 2,
          event: "大學(xué)城一期項(xiàng)目工程1樓土建工程",
          timeLine: 5,
          comment: "無"
         },
         {
          id: 3,
          event: "大學(xué)城一期項(xiàng)目工程1樓電氣工程",
          timeLine: 10,
          comment: "無"
         },
         {
          id: 4,
          event: "大學(xué)城一期項(xiàng)目工程1樓排水工程",
          timeLine: 75,
          comment: "無"
         },
         {
          id: 5,
          event: "大學(xué)城一期項(xiàng)目工程1樓采暖主體工程",
          timeLine: 25,
          comment: "無"
         }
        ]
       },
       {
        id: 6,
        event: "大學(xué)城一期項(xiàng)目工程2樓",
        timeLine: 90,
        comment: "無",
        children: [
         {
          id: 7,
          event: "大學(xué)城一期項(xiàng)目工程2樓土建工程",
          timeLine: 5,
          comment: "無"
         },
         {
          id: 8,
          event: "大學(xué)城一期項(xiàng)目工程2樓電氣工程",
          timeLine: 10,
          comment: "無"
         },
         {
          id: 9,
          event: "大學(xué)城一期項(xiàng)目工程2樓排水工程",
          timeLine: 75,
          comment: "無"
           },
           {
            id: 10,
            event: "大學(xué)城一期項(xiàng)目工程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);
   },
   // 關(guān)閉彈窗
   closeDialog(refresh = false) {
    this.$emit('hideDialog', refresh);
   },
   handleClick(event){
    console.log(event)
   }
  }
 };
</script>

<style lang="less">

</style>

到此這篇關(guān)于element中el-container容器與div布局區(qū)分詳解的文章就介紹到這了,更多相關(guān)element中el-container容器與div布局內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • vue3如何加載本地圖片等靜態(tài)資源淺析

    vue3如何加載本地圖片等靜態(tài)資源淺析

    在最近新起的項(xiàng)目中,用到了較新的技術(shù)棧vue3.2+vite+ts,跟著網(wǎng)上的寫法漸漸上手了,下面這篇文章主要給大家介紹了關(guān)于vue3如何加載本地圖片等靜態(tài)資源的相關(guān)資料,需要的朋友可以參考下
    2023-04-04
  • vue項(xiàng)目打包后,由于html被緩存導(dǎo)致出現(xiàn)白屏的處理方案

    vue項(xiàng)目打包后,由于html被緩存導(dǎo)致出現(xiàn)白屏的處理方案

    這篇文章主要介紹了vue項(xiàng)目打包后,由于html被緩存導(dǎo)致出現(xiàn)白屏的處理方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2023-03-03
  • 如何解決Element UI el-dialog打開一次后無法再次打開問題

    如何解決Element UI el-dialog打開一次后無法再次打開問題

    這篇文章主要介紹了如何解決Element UI el-dialog打開一次后無法再次打開問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-02-02
  • vue如何直接獲取url中的參數(shù)

    vue如何直接獲取url中的參數(shù)

    這篇文章主要介紹了vue如何直接獲取url中的參數(shù)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • Vue分頁插件的前后端配置與使用

    Vue分頁插件的前后端配置與使用

    這篇文章主要為大家詳細(xì)介紹了Vue分頁插件的前后端配置與使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2019-10-10
  • vue結(jié)合element-ui使用示例

    vue結(jié)合element-ui使用示例

    這一篇主要是創(chuàng)建一個(gè)vue項(xiàng)目并結(jié)合餓了么框架element-ui的文章。文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-01-01
  • vue中的任務(wù)隊(duì)列和異步更新策略(任務(wù)隊(duì)列,微任務(wù),宏任務(wù))

    vue中的任務(wù)隊(duì)列和異步更新策略(任務(wù)隊(duì)列,微任務(wù),宏任務(wù))

    這篇文章主要介紹了vue中的任務(wù)隊(duì)列和異步更新策略(任務(wù)隊(duì)列,微任務(wù),宏任務(wù))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-08-08
  • 一文帶你上手Vue新的狀態(tài)管理Pinia

    一文帶你上手Vue新的狀態(tài)管理Pinia

    Vuex 作為一個(gè)老牌 Vue 狀態(tài)管理庫，大家都很熟悉了，Pinia 是 Vue.js 團(tuán)隊(duì)成員專門為 Vue 開發(fā)的一個(gè)全新的狀態(tài)管理庫，本文就來講講它的具體使用吧
    2023-04-04
  • 使用vue實(shí)現(xiàn)pdf預(yù)覽功能的方法

    使用vue實(shí)現(xiàn)pdf預(yù)覽功能的方法

    許多朋友想要材料上傳之后點(diǎn)擊預(yù)覽實(shí)現(xiàn)在瀏覽器上預(yù)覽的效果,所以本文將給大家介紹如何使用vue實(shí)現(xiàn)pdf預(yù)覽功能,文中有實(shí)現(xiàn)代碼,有需要的朋友可以參考閱讀下
    2023-08-08
  • Vue如何使用ElementUI對(duì)表單元素進(jìn)行自定義校驗(yàn)及踩坑

    Vue如何使用ElementUI對(duì)表單元素進(jìn)行自定義校驗(yàn)及踩坑

    有一些驗(yàn)證不是通過input select這樣的受控組件來觸發(fā)驗(yàn)證條件的 ,可以通過自定義驗(yàn)證的方法來觸發(fā),下面這篇文章主要給大家介紹了關(guān)于Vue如何使用ElementUI對(duì)表單元素進(jìn)行自定義校驗(yàn)及踩坑的相關(guān)資料,需要的朋友可以參考下
    2023-02-02

最新評(píng)論