快捷導(dǎo)航

vue3 el-form-item如何自定義label標(biāo)簽內(nèi)容

更新時(shí)間：2023年10月17日 09:18:58 作者：jieyucx

這篇文章主要介紹了vue3 el-form-item如何自定義label標(biāo)簽內(nèi)容問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue3 el-form-item自定義label標(biāo)簽內(nèi)容

其實(shí)很簡(jiǎn)單啦 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>

我這里的需求如圖所示

在這里插入圖片描述

自定義問題前面的*（必填標(biāo)志）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>

但是在實(shí)際項(xiàng)目中，難免會(huì)用到自定義label，并且給label中的文字加樣式，這個(gè)時(shí)候就需要使用插槽的方式。

<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>

當(dāng)前，這個(gè)必填的*在elementUI的表單驗(yàn)證中也可以寫，但是在我的項(xiàng)目里有其他用途，不用糾結(jié)這個(gè)。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue3插槽(slot)使用方法詳解
在VUE開發(fā)項(xiàng)目的過程中,插槽<slot>是重要的承載分發(fā)內(nèi)容的出口,下面這篇文章主要給大家介紹了關(guān)于Vue3插槽(slot)使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
vue3.0 vue.config.js 配置基礎(chǔ)的路徑問題
這篇文章主要介紹了vue3.0 vue.config.js 配置基礎(chǔ)的路徑問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
Element中el-tabs左右滑動(dòng)動(dòng)畫的實(shí)現(xiàn)
本篇博客將詳細(xì)介紹如何在使用 Vue 以及 Element UI 時(shí),實(shí)現(xiàn)一個(gè)具有左右滑動(dòng)效果的 tab 切換動(dòng)畫,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-03-03
解決VUE的對(duì)話框el-dialog點(diǎn)擊外部消失問題
這篇文章主要介紹了解決VUE的對(duì)話框el-dialog點(diǎn)擊外部消失問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-02-02
解決keep-alive同一個(gè)組件不緩存問題
這篇文章給大家介紹了如何解決keep-alive同一個(gè)組件不緩存問題,文中通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2024-02-02
vuex?Mutations同步Actions異步原理解析
這篇文章主要為大家介紹了vuex?Mutations同步Actions異步原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
詳解Vue 實(shí)例中的生命周期鉤子
這篇文章主要介紹了詳解Vue 實(shí)例中的生命周期鉤子，在Vue的整個(gè)生命周期中，它提供了一些生命周期鉤子，給了我們執(zhí)行自定義邏輯的機(jī)會(huì)。
2017-03-03
Vue自定義指令獲取不到參數(shù)的原因及解決
這篇文章主要介紹了Vue自定義指令獲取不到參數(shù)的原因及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
VUE+jszip如何實(shí)現(xiàn)下載多個(gè)文件導(dǎo)出為一個(gè)zip格式
這篇文章主要介紹了VUE+jszip如何實(shí)現(xiàn)下載多個(gè)文件導(dǎo)出為一個(gè)zip格式方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue+element+electron仿微信實(shí)現(xiàn)代碼
這篇文章主要介紹了vue+element+electron仿微信實(shí)現(xiàn),本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-12-12