修改el-form-item中的label里面的字体边距或者大小问题

更新时间：2023年10月17日 09:49:20 作者：Luffy船长

这篇文章主要介绍了修改el-form-item中的label里面的字体边距或者大小问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

修改el-form-item中的label里面的字体边距或大小

问题描述

在form表单中，有的时候需要设置必填项之类的，可能会加个星(*)这样的话字体的两边的宽度就会对不齐，影响美观，可以看到这里的三个输入框就没对齐

解决方案：

解决方案其实很简单，只需要在from表单那就加上两个属性即可

码代码如下：

	                       <el-col :span="6">
								<el-form-item label="病种编码" prop="diseCodg" label-width="90px" style="margin-left: 10px;">
									<el-select v-model="queryInfos.diseCodg" style="width:100%" size="small" filterable clearable placeholder="请选择"
									 @change="Functioner" @change.native="selectBlurLogic" @blur.native="selectBlurLogic">
										<el-option v-for="(opt,j) in letters" :key="j" :label="opt.diseCodg" :value="opt.diseCodg">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>

将el-form-item 的label 的字体颜色修改为不同的颜色

用element的官方例子举例

比如要在活动名称后面加个括号(必填) 这种，颜色要写成红色，但是活动名称是写在label中的

<el-form-item label="活动名称">
    <el-input v-model="form.name"></el-input>
</el-form-item>

改成下面这样的

代码如下

 <el-form-item >
      <span slot="label">
      	<span>活动名称</span>
        <span style="color: red">（必填）</span>
      </span>
       <el-input v-model="form.name" style="width: 70%"></el-input>
</el-form-item>

去掉el-form-item label 属性

改成然后后面再用span 写上你要添加的内容颜色就可以自定义了

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue项目实现github在线预览功能
这篇文章主要介绍了vue项目实现github在线预览功能，本文通过提问两个问题带领大家一起学习整个过程,需要的朋友可以参考下
2018-06-06
vue+iview框架实现左侧动态菜单功能的示例代码
这篇文章主要介绍了vue+iview框架实现左侧动态菜单功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-07-07
vue基于vant实现上拉加载下拉刷新的示例代码
普遍存在于各种app中的上拉加载下拉刷新功能，本文主要介绍了vue基于vant实现上拉加载下拉刷新，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-01-01
Vue 报错Error: No PostCSS Config foun
这篇文章主要介绍了Vue 报错Error: No PostCSS Config found问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
Vue上传组件vue Simple Uploader的用法示例
本篇文章主要介绍了Vue上传组件vue Simple Uploader的用法示例，非常具有实用价值，需要的朋友可以参考下
2017-08-08
nginx+vue.js实现前后端分离的示例代码
这篇文章主要介绍了nginx+vue.js实现前后端分离的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-02-02
vue3中页面跳转两种实现方式
在Vue3中Vue Router是一个常用的路由管理库,它提供了一种简单而强大的方式来实现路由跳转和导航,这篇文章主要给大家介绍了关于vue3中页面跳转的两种实现方式,需要的朋友可以参考下
2024-09-09
Vue基于iview实现登录密码的显示与隐藏功能
这篇文章主要介绍了Vue基于iview实现登录密码的显示与隐藏功能,本文通过截图实例代码说明给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-03-03
Vue的click事件防抖和节流处理详解
今天小编就为大家分享一篇Vue的click事件防抖和节流处理详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
vue中实现当前时间echarts图表时间轴动态的数据(实例代码)
这篇文章主要介绍了vue中实现当前时间echarts图表时间轴动态的数据，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-10-10