使用el-row、el-col时布局错乱问题记录

使用el-row、el-col时出现布局错乱问题,如下图:

在这里插入图片描述

测试给提的bug,一直在本地没复现,后来仔细查了资料才发现,缩放浏览器页面(90%、110%)会出现这种情况,解决方法,el-row添加:

type="flex" style="flex-wrap:wrap"

在这里插入图片描述

AI用的太多,脑子不灵光了,半天想不出来怎么复现解决,还是得慎用!!!!

<template> <div> <!-- 条件查询 --> <div> <el-form> <!-- 第一行 --> <el-row> <el-col :span="8"> <div>查询条件:</div> </el-col> </el-row> <!-- 第二行 --> <el-row> <el-col :span="6"> <el-form-item label="卡号:"> <el-input style="width: 180px;"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="至"> <el-input style="width: 180px;"></el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="卡状态"> <el-select value="1" style="width: 240px;"> <el-option label="状态一" value="keshiyi"></el-option> <el-option label="状态二" value="keshier"></el-option> </el-select> </el-form-item> </el-col> </el-row> <!-- 第三行 --> <el-row> <el-col :span="6"> <el-form-item label="导入日期:"> <el-input style="width: 180px;"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="至"> <el-input style="width: 180px;"></el-input> </el-form-item> </el-col> <el-col :span="2"> <el-button type="primaty">查询</el-button> </el-col> <el-col :span="2"> <el-button type="primaty">卡入库</el-button> </el-col> </el-row> </el-form> </div> <!-- 表单 --> <div> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="序号" width="50"></el-table-column> <el-table-column prop="name" label="卡号" width="100"></el-table-column> <el-table-column prop="address" label="导入日期"></el-table-column> <el-table-column prop="address" label="卡状态"></el-table-column> <el-table-column prop="address" label="操作"></el-table-column> </el-table> </div> <!-- 分页 --> <div> <el-pagination :current-page="1" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400"> </el-pagination> </div> <!-- 卡入库 --> <div> <el-form> <!-- 第一行 --> <el-row> <el-col :span="24" style="text-align: center;"> <div><H2>卡入库</H2></div> </el-col> </el-row> <!-- 第二行 --> <el-row> <el-col :span="12" style="margin: 0 auto;"> <el-form-item label="开始卡号:" style="text-align: center;"> <el-input style="width: 240px;"></el-input> </el-form-item> </el-col> </el-row> </el-form> </div> </div> </template> <script> export default { data() { return { tableData: [{ date: '1', name: '张三', address: '' }, { date: '2', name: '李四', address: '' }, { date: '3', name: '王五', address: '' }, { date: '4', name: '赵六', address: '' }] } } } </script> <style> .el-row { margin-bottom: 20px; } .el-col { border-radius: 4px; } .bg-purple-dark { background: #99a9bf; } .bg-purple { background: #d3dce6; } .bg-purple-light { background: #e5e9f2; } .grid-content { border-radius: 4px; min-height: 36px; } .row-bg { padding: 10px 0; background-color: #f9fafc; } </style>使卡入库和另外三个区域分为两个表格
最新发布
08-20
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值