用于布局的容器组件,方便快速搭建页面的基本结构:
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显示
中间部分是主要展示内容
最下面是基本操作按钮
二、提出问题
我最开始的布局代码是:
部分不能说明问题的代码没有写出来
<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>
出现的页面是:
这个红色的部分,我放在了el-row里面,应该会出现在最后一行位置,但是他出现在第一行的并存位置,仔细查看代码,一切正常。
浏览器也已经识别
CSS样式没有冲突的地方。
三、解决方案
修改代码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一般是;
el-container一般是:
希望大家以后别犯我这样子的错误哈
五、本页面的源码
本页面的数据是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>
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]