修改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动态绑定多个class的官方实例语法无效的问题
今天小编就为大家分享一篇快速解决vue动态绑定多个class的官方实例语法无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue+vant 上传图片需要注意的地方
这篇文章主要介绍了vue+vant 上传图片需要注意的地方，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
2021-01-01
vue3.0 项目搭建和使用流程
这篇文章主要介绍了vue3.0 项目搭建和使用流程，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
2021-03-03
vue导出html、word和pdf的实现代码
这篇文章主要介绍了vue导出html、word和pdf的实现方法，文中完成了三种文件的导出但是还有很多种方法，小编就不给大家一一列举了,需要的朋友可以参考下
2018-07-07
el-menu如何根据多层树形结构递归遍历展示菜单栏
这篇文章主要介绍了el-menu根据多层树形结构递归遍历展示菜单栏,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-07-07
vue缓存之keep-alive的理解和应用详解
这篇文章主要介绍了vue缓存之keep-alive的理解和应用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-11-11
Vue的transition-group与Virtual Dom Diff算法的使用
这篇文章主要介绍了Vue的transition-group与Virtual Dom Diff算法的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-12-12
vue init webpack 项目初始化失败问题
在使用Vue-cli搭建项目时,可能会遇到依赖无法显示版本号的问题,首先检查环境变量配置是否正确,确保vue-init的安装目录被正确添加到path中,若问题仍未解决,尝试卸载并重新安装webpack,确保在正确的项目路径下执行npm install和npm run dev命令
2024-09-09
基于vue实现一个神奇的动态按钮效果
今天我们将利用vue的条件指令来完成一个简易的动态变色功能按钮,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
2019-05-05
Jeeplus-vue 实现文件的上传功能
这篇文章主要介绍了Jeeplus-vue 实现文件的上传，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-09-09