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

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

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

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

其實(shí)很簡單啦 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í)際項目中，難免會用到自定義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>

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

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

vue在外部方法給下拉框賦值后不顯示label的解決
這篇文章主要介紹了vue在外部方法給下拉框賦值后不顯示label的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
在項目vue中使用echarts的操作步驟
這篇文章主要介紹了在項目vue中使用echarts的操作步驟，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
vue封裝一個右鍵菜單組件詳解(復(fù)制粘貼即可使用)
關(guān)于vue項目中會出現(xiàn)一些需求,就是右鍵菜單項的功能實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue封裝一個右鍵菜單組件(復(fù)制粘貼即可使用)的相關(guān)資料,需要的朋友可以參考下
2022-12-12
vue-element-admin開發(fā)教程(v4.0.0之前)
本文主要介紹了vue-element-admin開發(fā)教程(v4.0.0之前)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-04-04
Vue?Router的安裝使用方法總結(jié)
在本文中,我們詳細(xì)講解了Vue路由的使用方法,我們首先安裝了Vue?Router,然后創(chuàng)建了一個Vue?Router實(shí)例,并配置了路由,感興趣的朋友一起看看吧
2023-11-11
Vue表單輸入綁定的示例代碼
這篇文章主要介紹了Vue表單輸入綁定的示例代碼，本文使用v-model指令在表單input創(chuàng)建雙向數(shù)據(jù)綁定，非常具有實(shí)用價值，需要的朋友可以參考下
2018-11-11
vue-router?導(dǎo)航完成后獲取數(shù)據(jù)的實(shí)現(xiàn)方法
這篇文章主要介紹了vue-router?導(dǎo)航完成后獲取數(shù)據(jù),通過使用生命周期的 created() 函數(shù)，在組件創(chuàng)建完成后調(diào)用該方法，本文結(jié)合實(shí)例代碼給大家講解的非常詳細(xì)需要的朋友可以參考下
2022-11-11
一文詳解Vue中nextTick的原理與作用
Vue的nextTick方法是用于在DOM更新后執(zhí)行回調(diào)的工具函數(shù),它的作用是在當(dāng)前JavaScript執(zhí)行環(huán)境中延遲執(zhí)行回調(diào),以確保在下次DOM更新循環(huán)之前,可以訪問到更新后的DOM,本文就給大家介紹一下Vue nextTick原理與作用,需要的朋友可以參考下
2023-08-08
解決vue路由組件vue-router實(shí)例被復(fù)用問題
這篇文章介紹了解決vue路由組件vue-router實(shí)例被復(fù)用的問題，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
Vuejs中的watch實(shí)例詳解(監(jiān)聽者)
本文通過實(shí)例代碼給大家介紹了Vuejs中的watch，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
2020-01-01