vue3 el-form-item如何自定义label标签内容
作者：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的表单验证中也可以写，但是在我的项目里有其他用途，不用纠结这个。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。