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开发项目的过程中,插槽<slot>是重要的承载分发内容的出口,下面这篇文章主要给大家介绍了关于Vue3插槽(slot)使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
vue3.0 vue.config.js 配置基础的路径问题
这篇文章主要介绍了vue3.0 vue.config.js 配置基础的路径问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
本篇博客将详细介绍如何在使用 Vue 以及 Element UI 时,实现一个具有左右滑动效果的 tab 切换动画,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧2024-03-03
这篇文章主要介绍了解决VUE的对话框el-dialog点击外部消失问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
这篇文章给大家介绍了如何解决keep-alive同一个组件不缓存问题,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-02-02
这篇文章主要为大家介绍了vuex Mutations同步Actions异步原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了详解Vue 实例中的生命周期钩子，在Vue的整个生命周期中，它提供了一些生命周期钩子，给了我们执行自定义逻辑的机会。2017-03-03
这篇文章主要介绍了Vue自定义指令获取不到参数的原因及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了VUE+jszip如何实现下载多个文件导出为一个zip格式方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了vue+element+electron仿微信实现,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
最新评论