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中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 Javascript
使用jQuery操作Cookies的实现代码
Oct 09 Javascript
event.currentTarget与event.target的区别介绍
Dec 31 Javascript
JavaScript中获取鼠标位置相关属性总结
Oct 11 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
Mar 07 Javascript
Node.js文件操作方法汇总
Mar 22 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
Sep 17 Javascript
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
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&amp;&amp;mysql)五
2006/10/09 PHP
PHP中,文件上传
2006/12/06 PHP
for循环连续求和、九九乘法表代码
2012/02/20 PHP
PHP判断字符串长度的两种方法很实用
2015/09/22 PHP
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
PHP的Yii框架中过滤器相关的使用总结
2016/03/29 PHP
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
js下将字符串当函数执行的方法
2011/07/13 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
js CSS3实现卡牌旋转切换效果
2017/07/04 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
Python读取mp3中ID3信息的方法
2015/03/05 Python
python正则分析nginx的访问日志
2017/01/17 Python
Python实现完整的事务操作示例
2017/06/20 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
Python使用sqlalchemy模块连接数据库操作示例
2019/03/13 Python
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
如何使用python代码操作git代码
2020/02/29 Python
Python selenium自动化测试模型图解
2020/04/15 Python
一款纯css3实现的鼠标悬停动画按钮
2014/12/29 HTML / CSS
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
如何估计一张表的大小(假设该表中有1万条数据)
2016/03/27 面试题
Java面试题:请说出如下代码的输出结果
2013/04/22 面试题
房产委托公证书样本
2014/04/04 职场文书
投资合作协议书范本
2014/04/17 职场文书
python绘制箱型图
2021/04/27 Python
提高系统的吞吐量解决数据库重复写入问题
2022/04/23 MySQL