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

Javascript 相关文章推荐
一个简单的JavaScript 日期计算算法
Sep 11 Javascript
JS去除iframe滚动条的方法
Apr 01 Javascript
jQuery中使用each处理json数据
Apr 23 Javascript
JavaScript实现基于十进制的四舍五入实例
Jul 17 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 Javascript
微信小程序  网络请求API详解
Oct 25 Javascript
微信小程序 石头剪刀布实例代码
Jan 04 Javascript
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 Javascript
使用Vue自定义指令实现Select组件
May 24 Javascript
Vue利用History记录上一页面的数据方法实例
Nov 02 Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 Javascript
JavaScript原型链详解
Nov 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
You might like
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
JavaScript 参考教程
2006/12/29 Javascript
深入认识javascript中的eval函数
2009/11/02 Javascript
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
Bootstrap实现响应式导航栏效果
2015/12/28 Javascript
初步使用bootstrap快速创建页面
2016/03/03 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
2016/05/24 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
浅谈vuex 闲置状态重置方案
2018/01/04 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
用vue写一个日历
2020/11/02 Javascript
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
[06:44]2018DOTA2亚洲邀请赛4.5 SOLO赛 MidOne vs Sumail
2018/04/06 DOTA
浅析python 内置字符串处理函数的使用方法
2014/06/11 Python
python根据出生日期返回年龄的方法
2015/03/26 Python
python学习之编写查询ip程序
2016/02/27 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
英语系本科生个人求职信
2013/09/21 职场文书
会计电算化专业应届大学生求职信
2013/10/22 职场文书
学术会议邀请函范文
2014/01/22 职场文书
环境工程专业自荐信范文
2014/03/18 职场文书
工作保证书范文
2014/04/29 职场文书
日语系毕业求职信
2014/07/27 职场文书
优秀教师工作总结2015
2015/07/22 职场文书
2015大学党建带团建工作总结
2015/07/23 职场文书
2015双创工作总结
2015/07/24 职场文书