修改el-form-item中的label里面的字體邊距或者大小問題

更新時間：2023年10月17日 09:49:20 作者：Luffy船長

這篇文章主要介紹了修改el-form-item中的label里面的字體邊距或者大小問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

修改el-form-item中的label里面的字體邊距或大小

問題描述

在form表單中，有的時候需要設(shè)置必填項之類的，可能會加個星(*)這樣的話字體的兩邊的寬度就會對不齊，影響美觀，可以看到這里的三個輸入框就沒對齊

解決方案：

解決方案其實很簡單，只需要在from表單那就加上兩個屬性即可

碼代碼如下：

	                       <el-col :span="6">
								<el-form-item label="病種編碼" prop="diseCodg" label-width="90px" style="margin-left: 10px;">
									<el-select v-model="queryInfos.diseCodg" style="width:100%" size="small" filterable clearable placeholder="請選擇"
									 @change="Functioner" @change.native="selectBlurLogic" @blur.native="selectBlurLogic">
										<el-option v-for="(opt,j) in letters" :key="j" :label="opt.diseCodg" :value="opt.diseCodg">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>

將el-form-item 的label 的字體顏色修改為不同的顏色

用element的官方例子舉例

比如要在活動名稱后面加個括號(必填) 這種，顏色要寫成紅色，但是活動名稱是寫在label中的

<el-form-item label="活動名稱">
    <el-input v-model="form.name"></el-input>
</el-form-item>

改成下面這樣的

代碼如下

 <el-form-item >
      <span slot="label">
      	<span>活動名稱</span>
        <span style="color: red">（必填）</span>
      </span>
       <el-input v-model="form.name" style="width: 70%"></el-input>
</el-form-item>

去掉el-form-item label 屬性

改成然后后面再用span 寫上你要添加的內(nèi)容顏色就可以自定義了

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

快速解決vue動態(tài)綁定多個class的官方實例語法無效的問題
今天小編就為大家分享一篇快速解決vue動態(tài)綁定多個class的官方實例語法無效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue+vant 上傳圖片需要注意的地方
這篇文章主要介紹了vue+vant 上傳圖片需要注意的地方，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2021-01-01
vue3.0 項目搭建和使用流程
這篇文章主要介紹了vue3.0 項目搭建和使用流程，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下
2021-03-03
vue導出html、word和pdf的實現(xiàn)代碼
這篇文章主要介紹了vue導出html、word和pdf的實現(xiàn)方法，文中完成了三種文件的導出但是還有很多種方法，小編就不給大家一一列舉了,需要的朋友可以參考下
2018-07-07
el-menu如何根據(jù)多層樹形結(jié)構(gòu)遞歸遍歷展示菜單欄
這篇文章主要介紹了el-menu根據(jù)多層樹形結(jié)構(gòu)遞歸遍歷展示菜單欄,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2024-07-07
vue緩存之keep-alive的理解和應用詳解
這篇文章主要介紹了vue緩存之keep-alive的理解和應用詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-11-11
Vue的transition-group與Virtual Dom Diff算法的使用
這篇文章主要介紹了Vue的transition-group與Virtual Dom Diff算法的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-12-12
vue init webpack 項目初始化失敗問題
在使用Vue-cli搭建項目時,可能會遇到依賴無法顯示版本號的問題,首先檢查環(huán)境變量配置是否正確,確保vue-init的安裝目錄被正確添加到path中,若問題仍未解決,嘗試卸載并重新安裝webpack,確保在正確的項目路徑下執(zhí)行npm install和npm run dev命令
2024-09-09
基于vue實現(xiàn)一個神奇的動態(tài)按鈕效果
今天我們將利用vue的條件指令來完成一個簡易的動態(tài)變色功能按鈕,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧
2019-05-05
Jeeplus-vue?實現(xiàn)文件的上傳功能
這篇文章主要介紹了Jeeplus-vue?實現(xiàn)文件的上傳，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2022-09-09