在el-form中添加 class=“edit-el-form“ 属性可以缩短el-dialog中的el-form的每一个el-form-item之间的间隔

最新推荐文章于 2025-05-28 11:43:05 发布

JCjunior

最新推荐文章于 2025-05-28 11:43:05 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/JCjunior/article/details/129579671

在Vue.js中，通过在el-form组件上添加class=edit-el-form可以修改el-dialog内的el-form-item间距，具体表现为缩短每个表单项之间的距离，提供更紧凑的布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在el-form中添加 class=“edit-el-form” 属性可以缩短el-dialog中的el-form的每一个el-form-item之间的间隔：

 <el-dialog
     width="100%"
     :title="title"
     :visible.sync="dialogVisible"
     :before-close="closeDialog"
     :close-on-click-modal="false"
     fullscreen>
	    <el-form 
	    	class="edit-el-form"
	    	ref="form" 
	    	label-width="80px" 
	    	style="border:1px solid #C4E1C5;padding:20px;">
			<el-form-item label="姓名">
			  <el-input v-model="user.name"></el-input>
			</el-form-item>
			<el-form-item label="年龄">
			  <el-input v-model="user.age"></el-input>
			</el-form-item>
			<el-form-item>
			  <el-button type="primary">确认</el-button>
			  <el-button>取消</el-button>
			</el-form-item>
	    </el-form>
</el-dialog>