首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

element中el-container容器与div布局区分详解

Posted in Javascript onMay 13, 2020

用于布局的容器组件，方便快速搭建页面的基本结构：

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显示
中间部分是主要展示内容
最下面是基本操作按钮

element中el-container容器与div布局区分详解

二、提出问题

我最开始的布局代码是：

部分不能说明问题的代码没有写出来

<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>

出现的页面是：

element中el-container容器与div布局区分详解

这个红色的部分，我放在了el-row里面，应该会出现在最后一行位置，但是他出现在第一行的并存位置，仔细查看代码，一切正常。

浏览器也已经识别

element中el-container容器与div布局区分详解

CSS样式没有冲突的地方。

三、解决方案

修改代码el-container布局为div

element中el-container容器与div布局区分详解

页面布局就是想要的结果：

element中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一般是；

element中el-container容器与div布局区分详解

el-container一般是：

element中el-container容器与div布局区分详解

希望大家以后别犯我这样子的错误哈

五、本页面的源码

本页面的数据是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布局内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

element中el-container容器与div布局区分详解

- Author -

默默J

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Jquery 高亮显示文本中重要的关键字
Dec 24 Javascript
Javascript解决常见浏览器兼容问题的12种方法
Jan 04 Javascript
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
Oct 22 Javascript
用jQuery toggleClass 实现鼠标移上变色
May 14 Javascript
动态加载js、css的简单实现代码
May 26 Javascript
JS清除字符串中重复值的实现方法
Aug 03 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 Javascript
JS实现的集合去重，交集，并集，差集功能示例
Mar 13 Javascript
详解vue更改头像功能实现
Apr 28 Javascript
vue路由实现登录拦截
Mar 24 Vue.js
JS class语法糖的深入剖析
Jul 07 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
May 13 #Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
May 13 #Javascript
Node 模块原理与用法详解
May 13 #Javascript
JavaScript oncopy事件用法实例解析
May 13 #Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
May 13 #Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
May 13 #Javascript
Node.js API详解之 module模块用法实例分析
May 13 #Javascript
html5+(1) 磁盘管理(1) plus.io(1) Vmware(3) 虚拟机(3) Hash(1) 入门基础(1) RabbitMQ(3) 触发器(3) Geospatial(1)
You might like
MySQL相关说明
2007/01/15 PHP
PHP获取当前url的具体方法全面解析
2013/11/26 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
浅谈Laravel核心解读之Console内核
2018/12/02 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
JavaScript 拖拉缩放效果
2008/12/10 Javascript
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
2014/09/21 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
2015/05/03 Javascript
详解基于angular路由的requireJs按需加载js
2017/01/20 Javascript
vue2的todolist入门小项目的详细解析
2017/05/11 Javascript
Webpack如何引入bootstrap的方法
2017/06/17 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
2017/12/01 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
js+canvas实现简单扫雷小游戏
2021/01/22 Javascript
微信小程序分享小程序码的生成（带参数）以及参数的获取
2020/03/25 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
2020/05/13 Javascript
javascript实现评分功能
2020/06/24 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
Python多线程和队列操作实例
2015/06/21 Python
Python编程使用NLTK进行自然语言处理详解
2017/11/16 Python
利用 python 对目录下的文件进行过滤删除
2017/12/27 Python
python 利用栈和队列模拟递归的过程
2018/05/29 Python
Python 实现某个功能每隔一段时间被执行一次的功能方法
2018/10/14 Python
Python hexstring-list-str之间的转换方法
2019/06/12 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
用css3制作纸张效果(外翻卷角)
2013/02/01 HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
难忘的一天教学反思
2014/04/30 职场文书
欢迎词怎么写
2015/01/23 职场文书
档案接收函格式
2015/01/30 职场文书
python 进阶学习之python装饰器小结
2021/09/04 Python