el-container 实践上的布局问题

当自己利用element-ui上面的例子来实现整体布局的时候,

就是自己分开成单独的vue组件时,发现布局是不对的,效果是这样的:

代码是这样的,代码一模一样,只是拆开了各个组件,如下图:

后来发现是这个问题,当你拆开后,el-container容器不知道子元素中是否有 el-header 或 el-footer,

答案在这里

 

完善答案如图:

 

 

 

 

转载于:https://www.cnblogs.com/ertingbo/p/8135391.html

<!-- 添加用户弹框--> <el-dialog :title="title" v-model="openAddUser" width="90%" append-to-body fullscreen> <el-form :model="queryEmp" ref="queryDetRef" :inline="true" label-width="150px"> <el-form-item label="用户" prop="EMP_NAME_"> <el-input v-model="queryEmp.EMP_NAME_" placeholder="请输入用户名称" clearable style="width: 240px" @keyup.enter="handleQueryEmp" /> </el-form-item> <el-form-item> <el-button type="primary" icon="Search" @click="handleQueryEmp">搜索</el-button> <el-button icon="Refresh" @click="resetQueryDet">重置</el-button> </el-form-item> </el-form> <!-- 使用 el-row 和 el-col 实现左右布局 --> <el-row :gutter="20"> <!-- 左侧表格 --> <el-col :span="12"> <el-card> <el-table v-loading="loading" :data="empListLeft"> <el-table-column type="selection" width="50" align="center"/> <el-table-column label="用户编号" align="center" key="EMP_ID_" prop="EMP_CODE_"/> <el-table-column label="用户名称" align="center" key="userName" prop="EMP_NAME_"/> <el-table-column label="机构名称" align="center" key="ORG_NAME_" prop="ORG_NAME_"/> <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <template #default="scope"> <el-button link type="primary" @click="handleAddEmp(scope.row)">添加</el-button> </template> </el-table-column> </el-table> </el-card> </el-col> <!-- 右侧表格 --> <el-col :span="12"> <el-card> <el-table v-loading="loading" :data="empListRight"> <el-table-column type="selection" width="50" align="center"/> <el-table-column label="用户编号" align="center" key="EMP_ID_" prop="EMP_CODE_"/> <el-table-column label="用户名称" align="center" key="
03-11
<!--考试安排--> <template> <div> <div class="search"> <el-input placeholder="请输入标题查询" style="width: 200px" v-model="name"></el-input> <el-button type="info" plain style="margin-left: 10px" @click="load(1)">查询</el-button> <el-button type="warning" plain style="margin-left: 10px" @click="reset">重置</el-button> </div> <div class="operation"> <el-button type="primary" plain @click="handleAdd">考试安排</el-button> <el-button type="danger" plain @click="delBatch">批量删除</el-button> </div> <div class="table"> <el-table :data="tableData" stripe @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" align="center"></el-table-column> <el-table-column prop="id" label="序号" width="80" align="center" sortable></el-table-column> <el-table-column prop="courseName" label="考试课程" show-overflow-tooltip></el-table-column> <el-table-column prop="teacherName" label="监考老师" show-overflow-tooltip></el-table-column> <el-table-column prop="roomName" label="考试教室" show-overflow-tooltip></el-table-column> <el-table-column prop="examTime" label="考试时间" show-overflow-tooltip></el-table-column> <el-table-column prop="time" label="创建时间"></el-table-column> <el-table-column label="操作" width="180" align="center"> <template v-slot="scope"> <el-button plain type="primary" @click="handleEdit(scope.row)" size="mini">编辑</el-button> <el-button plain type="danger" size="mini" @click=del(scope.row.id)>删除</el-button> </template> </el-table-column> </el-table> <div class="pagination"> <el-pagination background @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[5, 10, 20]" :page-size="pageSize" layout="total, prev, pager, next" :total="total"> </el-pagination> </div> </div>
03-20
<template> <div class="test-container pats-view"> <div class="test-box"> <div>数据发送</div> <div> <el-button type="primary" size="small" v-if="!(this.client && this.client.connected)" @click="createConnection">链接Mqtt </el-button> <el-button type="danger" size="small" v-if="this.client && this.client.connected" @click="destroyConnection">断开链接 </el-button> <el-button type="warning" size="small" v-if="this.subscribeSuccess === false" @click="doSubscribe">订阅 </el-button> <el-button type="danger" size="small" v-if="this.subscribeSuccess === true" @click="doUnSubscribe"> 取消订阅 </el-button> <el-button size="small" @click="getTripsNum">趟数</el-button> <el-button type="success" size="small" @click="handleMqtt">发送数据</el-button> </div> </div> <div class="test-box"> <div class="test-left"> <div>压力值</div> <div> <el-button type="default" size="small" @click="handleResetPress">重置</el-button> <el-button type="primary" size="small" @click="handleMqttPress">mqtt发送</el-button> </div> </div> <div class="test-right-bottom"> <avue-form ref="pressForm" :option="pressOption" v-model="pressData"></avue-form> </div> </div> <div class="test-box"> <div class="test-left"> <div> 水平值 </div> <div> <el-button type="default" size="small" @click="handleResetLevel">重置</el-button> <el-button type="primary" size="small" @click="handleMqttLevel">mqtt发送</el-button> </div> </div> <div class="test-right-bottom"> <avue-form ref="hLevelForm" :option="hLevelOption" v-model="hLevelData" :append-to-body="false"></avue-form> </div> </div> </div> </template>有问题
03-26
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值