首页
所有分类
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+json 通用三级联动下拉列表
Apr 19 Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
Sep 29 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 Javascript
js判断浏览器类型及设备（移动页面开发）
Jul 30 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 Javascript
Javascript动画效果（3）
Oct 11 Javascript
jQuery中的select操作详解
Nov 29 Javascript
js实现颜色阶梯渐变效果（Gradient算法）
Mar 21 Javascript
react系列从零开始_简单谈谈react
Jul 06 Javascript
详解javascript中的变量提升和函数提升
May 24 Javascript
深入了解Vue3模板编译原理
Nov 19 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
zabbix(9) text-shadow(1) 缓存机制(1) 区块链(2) http_stub_status_module(1) keeplive_timeout(1) location(2) RTMP(1) TypeScript(2) BufferPool(1)
You might like
使PHP自定义函数返回多个值
2006/11/26 PHP
php_xmlhttp 乱码问题解决方法
2009/08/07 PHP
php中session_unset与session_destroy的区别分析
2011/06/16 PHP
PHP输出当前进程所有变量/常量/模块/函数/类的示例
2013/11/07 PHP
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
PHP中让curl支持sock5的代码实例
2015/01/21 PHP
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
AngularJS基础 ng-readonly 指令简单示例
2016/08/02 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
微信小程序 常见问题总结（4058，40013）及解决办法
2017/01/11 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
NodeJS 将文件夹按照存放路径变成一个对应的JSON的方法
2018/10/17 NodeJs
详解vuex之store拆分即多模块状态管理(modules)篇
2018/11/13 Javascript
JavaScript算法学习之冒泡排序和选择排序
2019/11/02 Javascript
JavaScript中的函数式编程详解
2020/08/22 Javascript
wxpython 学习笔记 第一天
2009/02/09 Python
go语言计算两个时间的时间差方法
2015/03/13 Python
Python中random模块生成随机数详解
2016/03/10 Python
Python自动化部署工具Fabric的简单上手指南
2016/04/19 Python
详解Python中类的定义与使用
2017/04/11 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
HTML的form表单和django的form表单
2019/07/25 Python
python+opencv实现移动侦测（帧差法）
2020/03/20 Python
Python中logger日志模块详解
2020/08/04 Python
最新pycharm安装教程
2020/11/18 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
HTML5学习笔记之History API
2015/02/26 HTML / CSS
浅析移动设备HTML5页面布局
2015/12/01 HTML / CSS
Hotels.com加拿大：领先的在线住宿网站
2018/10/05 全球购物
英国最大的宠物商店：Pets at Home
2019/04/17 全球购物
蔻驰英国官网：COACH英国
2020/07/19 全球购物
消防志愿者活动方案
2014/08/23 职场文书
大学生学习十八届五中全会精神心得体会
2016/01/05 职场文书
JS前端使用Canvas快速实现手势解锁特效
2022/09/23 Javascript