快捷導(dǎo)航

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

更新時(shí)間：2023年10月17日 09:49:20 作者：Luffy船長(zhǎng)

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

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

問(wèn)題描述

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

解決方案：

解決方案其實(shí)很簡(jiǎn)單，只需要在from表單那就加上兩個(gè)屬性即可

碼代碼如下：

	                       <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="請(qǐng)選擇"
									 @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的官方例子舉例

比如要在活動(dòng)名稱后面加個(gè)括號(hào)(必填) 這種，顏色要寫成紅色，但是活動(dòng)名稱是寫在label中的

<el-form-item label="活動(dòng)名稱">
    <el-input v-model="form.name"></el-input>
</el-form-item>

改成下面這樣的

代碼如下

 <el-form-item >
      <span slot="label">
      	<span>活動(dòng)名稱</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é)

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

您可能感興趣的文章:

相關(guān)文章

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