快捷導(dǎo)航

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

其實很簡單啦 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>

但是在實際項目中，難免會用到自定義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的表單驗證中也可以寫，但是在我的項目里有其他用途，不用糾結(jié)這個。

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

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