修改el-form-item中的label里面的字體邊距或者大小問(wèn)題
修改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項(xiàng)目實(shí)現(xiàn)github在線預(yù)覽功能
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)github在線預(yù)覽功能，本文通過(guò)提問(wèn)兩個(gè)問(wèn)題帶領(lǐng)大家一起學(xué)習(xí)整個(gè)過(guò)程,需要的朋友可以參考下2018-06-06
vue+iview框架實(shí)現(xiàn)左側(cè)動(dòng)態(tài)菜單功能的示例代碼
這篇文章主要介紹了vue+iview框架實(shí)現(xiàn)左側(cè)動(dòng)態(tài)菜單功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
vue基于vant實(shí)現(xiàn)上拉加載下拉刷新的示例代碼
普遍存在于各種app中的上拉加載下拉刷新功能，本文主要介紹了vue基于vant實(shí)現(xiàn)上拉加載下拉刷新，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
Vue 報(bào)錯(cuò)Error: No PostCSS Config foun
這篇文章主要介紹了Vue 報(bào)錯(cuò)Error: No PostCSS Config found問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue上傳組件vue Simple Uploader的用法示例
本篇文章主要介紹了Vue上傳組件vue Simple Uploader的用法示例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-08-08
nginx+vue.js實(shí)現(xiàn)前后端分離的示例代碼
這篇文章主要介紹了nginx+vue.js實(shí)現(xiàn)前后端分離的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
vue3中頁(yè)面跳轉(zhuǎn)兩種實(shí)現(xiàn)方式
在Vue3中Vue?Router是一個(gè)常用的路由管理庫(kù),它提供了一種簡(jiǎn)單而強(qiáng)大的方式來(lái)實(shí)現(xiàn)路由跳轉(zhuǎn)和導(dǎo)航,這篇文章主要給大家介紹了關(guān)于vue3中頁(yè)面跳轉(zhuǎn)的兩種實(shí)現(xiàn)方式,需要的朋友可以參考下2024-09-09
Vue基于iview實(shí)現(xiàn)登錄密碼的顯示與隱藏功能
這篇文章主要介紹了Vue基于iview實(shí)現(xiàn)登錄密碼的顯示與隱藏功能,本文通過(guò)截圖實(shí)例代碼說(shuō)明給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-03
今天小編就為大家分享一篇Vue的click事件防抖和節(jié)流處理詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
vue中實(shí)現(xiàn)當(dāng)前時(shí)間echarts圖表時(shí)間軸動(dòng)態(tài)的數(shù)據(jù)(實(shí)例代碼)
這篇文章主要介紹了vue中實(shí)現(xiàn)當(dāng)前時(shí)間echarts圖表時(shí)間軸動(dòng)態(tài)的數(shù)據(jù)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-10-10