修改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如何修改浏览器的标题title
这篇文章主要介绍了vue如何修改浏览器的标题title问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
React/vue开发报错TypeError:this.getOptions is not a function
这篇文章主要给大家介绍了关于React/vue开发报错TypeError:this.getOptions is not a function的解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-07-07
Vue组件的Prop命名约定详解
这篇文章主要为大家介绍了Vue组件的Prop命名约定详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-08-08
解决vue.js 数据渲染成功仍报错的问题
今天小编就为大家分享一篇解决vue.js 数据渲染成功仍报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
el-table表格动态合并行及合并行列实例详解
在使用el-table的时候经常会涉及到表格的列合并，包括表格操作列的合并,下面这篇文章主要给大家介绍了关于el-table表格动态合并行及合并行列的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-10-10
vue如何引入sass全局变量
sass或者less都提供变量设置，在需求切换主题的项目中使用less或者sass变量，这篇文章主要介绍了vue引入sass全局变量，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-06-06
使用vue init webpack项目名创建项目方式
这篇文章主要介绍了使用vue init webpack项目名创建项目方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
Vue.js devtool插件安装后无法使用的解决办法
Vue.js devtool插件最近在开发人员中很火，这篇文章主要为大家详细介绍了Vue.js devtool插件安装后无法使用，出现提示“vue.js not detected”的解决办法
2017-11-11
Vue中图片Src使用变量的方法
这篇文章主要介绍了Vue中图片Src使用变量的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-10-10
vue插值表达式和v-text指令的区别
这篇文章主要介绍了vue插值表达式和v-text指令的区别，{{}}这种语法叫做插值表达式，在插值表达式中可以写任何合法的js表达式，下面来看看文章是怎么介绍该内容的吧,需要的朋友可以参考一下
2021-11-11