vue3 el-form-item如何自定义label标签内容

更新时间：2023年10月17日 09:18:58 作者：jieyucx

这篇文章主要介绍了vue3 el-form-item如何自定义label标签内容问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue3 el-form-item自定义label标签内容

其实很简单啦 le-form-item为用户留有插槽啦

直接看代码吧

<el-form-item
     label-width="100px"
     prop="problemName"
 >
      <template #label>
         <i class="must-tip">*</i>
           问题
      </template>
      <el-input v-model="problemName" />
</el-form-item>

我这里的需求如图所示

在这里插入图片描述

自定义问题前面的*（必填标志）css部分如下

.must-tip{
  margin-right: 5px;
  color: red;
}

＜el-form＞的＜el-form-item＞使用自定义label的写法

如果不需要自定义，直接下面这样写就可以。

<el-form ref="ruleForm" label-width="100" class="formStyle">
    <el-form-item label="工作说明">
        <el-input type="textarea" v-model="editOrder.workDesc" class="textareaRate" resize="none" size="mini"></el-input>
    </el-form-item>
</el-form>

但是在实际项目中，难免会用到自定义label，并且给label中的文字加样式，这个时候就需要使用插槽的方式。

<el-form ref="ruleForm" label-width="100" class="formStyle">
    <el-form-item>
        <span slot="label"><span style="color: #f56c6c;font-size: 14px;"> * </span>工作说明</span>
        <el-select v-model="editOrder.orderStatus" size="mini">
            <el-option :label="item.label" :value="item.value" v-for="item,index of orderStatusArr" :key="index"></el-option>
        </el-select>
    </el-form-item>
</el-form>

当前，这个必填的*在elementUI的表单验证中也可以写，但是在我的项目里有其他用途，不用纠结这个。

总结

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

您可能感兴趣的文章:

vue在外部方法给下拉框赋值后不显示label的解决
这篇文章主要介绍了vue在外部方法给下拉框赋值后不显示label的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
在项目vue中使用echarts的操作步骤
这篇文章主要介绍了在项目vue中使用echarts的操作步骤，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
vue封装一个右键菜单组件详解(复制粘贴即可使用)
关于vue项目中会出现一些需求,就是右键菜单项的功能实现,下面这篇文章主要给大家介绍了关于vue封装一个右键菜单组件(复制粘贴即可使用)的相关资料,需要的朋友可以参考下
2022-12-12
vue-element-admin开发教程(v4.0.0之前)
本文主要介绍了vue-element-admin开发教程(v4.0.0之前)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-04-04
Vue Router的安装使用方法总结
在本文中,我们详细讲解了Vue路由的使用方法,我们首先安装了Vue Router,然后创建了一个Vue Router实例,并配置了路由,感兴趣的朋友一起看看吧
2023-11-11
Vue表单输入绑定的示例代码
这篇文章主要介绍了Vue表单输入绑定的示例代码，本文使用v-model指令在表单input创建双向数据绑定，非常具有实用价值，需要的朋友可以参考下
2018-11-11
vue-router 导航完成后获取数据的实现方法
这篇文章主要介绍了vue-router 导航完成后获取数据,通过使用生命周期的 created() 函数，在组件创建完成后调用该方法，本文结合实例代码给大家讲解的非常详细需要的朋友可以参考下
2022-11-11
一文详解Vue中nextTick的原理与作用
Vue的nextTick方法是用于在DOM更新后执行回调的工具函数,它的作用是在当前JavaScript执行环境中延迟执行回调,以确保在下次DOM更新循环之前,可以访问到更新后的DOM,本文就给大家介绍一下Vue nextTick原理与作用,需要的朋友可以参考下
2023-08-08
解决vue路由组件vue-router实例被复用问题
这篇文章介绍了解决vue路由组件vue-router实例被复用的问题，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
Vuejs中的watch实例详解(监听者)
本文通过实例代码给大家介绍了Vuejs中的watch，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
2020-01-01