el-form和el-col响应式布局

最新推荐文章于 2024-07-08 15:26:49 发布

hikktn

最新推荐文章于 2024-07-08 15:26:49 发布

阅读量5.6k

点赞数 2

分类专栏： # Vue 前端

本文链接：https://blog.csdn.net/qq_41520636/article/details/119640163

版权

前端同时被 2 个专栏收录

25 篇文章 3 订阅

订阅专栏

Vue

16 篇文章 0 订阅

订阅专栏

说明

首先如果使用:inline="true"元素，这个好处在于能够左右元素保持在同一行，可惜里面有bug，和el-col同时使用，就会出现el-input换行，即便调整好，放大缩小也会出现换行问题。
为了解决这一问题，只能放弃使用:inline=“true”。

效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/element-ui@2.15.2/lib/index.js"></script>
	</head>

	<body>
		<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script src="//unpkg.com/element-ui@2.4.3/lib/index.js"></script>
		<div id="app">
			<el-form ref="form" :model="form" label-width="80px">
				<el-row>
					<el-col :span="8">
						<el-form-item label="活动名称" :inline="false">
							<el-input v-model="form.name"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="活动区域">
							<el-select v-model="form.region" placeholder="请选择活动区域">
								<el-option label="区域一" value="shanghai"></el-option>
								<el-option label="区域二" value="beijing"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="活动名称1">
							<el-input v-model="form.name1"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="6">
						<el-form-item label="活动名称2">
							<el-input v-model="form.name2"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="活动区域2">
							<el-select v-model="form.region2" placeholder="请选择活动区域">
								<el-option label="区域一" value="shanghai"></el-option>
								<el-option label="区域二" value="beijing"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="活动名称3">
							<el-input v-model="form.name3"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="1.5" class="elrow">
						<el-form-item class="btnLeft">
							<el-button type="primary" icon="el-icon-search" size="mini">查询
							</el-button>
						</el-form-item>
					</el-col>
					<el-col :span="1.5" class="elrow">
						<el-form-item class="btnLeft">
							<el-button type="primary" icon="el-icon-refresh" size="mini">重置
							</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
	</body>
	<script>
		var app = new Vue({
			el: '#app',
			data() {
				return {
					form: {
						name: '',
						region: '',
						name2: '',
						name3: '',
						region2: '',
					}
				}
			},
			methods: {
				onSubmit() {
					console.log('submit!');
				}
			}
		});
	</script>
	<style scoped>
		@import url("//unpkg.com/element-ui@2.15.2/lib/theme-chalk/index.css");
		
		.elrow .el-form-item__content {
			margin-left: 10px!important;
		}
	</style>

</html>

hikktn

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
4
评论
el-form和el-col响应式布局

说明首先如果使用:inline="true"元素，这个好处在于能够左右元素保持在同一行，可惜里面有bug，和el-col同时使用，就会出现el-input换行，即便调整好，放大缩小也会出现换行问题。为了解决这一问题，只能放弃使用:inline=“true”。效果代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"
复制链接

扫一扫